div要素を半透明にして且つ外枠をつけたいです。
下記のように書いたのですが、borderも一緒に半透明になってしまいます。添付画像の様にするにはどうしたらよいでしょうか?
教えてください。
<html>
<head>
<style>
div{
background: green;
opacity:0.2;
filter: alpha(opacity=20);
border: 1px solid green;
}
#hoge{
position: absolute;
top: 0;
left: 50;
width :50;
height :50;
}
</style>
</head>
<body>
あいうえお
<div id='hoge' ></div>
</body>
No.1ベストアンサー
- 回答日時:
divの入れ子はダメ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>opacity</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
.box1 {
position: absolute;
top: 10px;
left: 10px;
width :50px;
height :50px;
border: 1px solid green;
}
.box2 {
background: green;
opacity:0.2;
width :50px;
height :50px;
filter: alpha(opacity=20);
}
-->
</style>
</head>
<body>
<p>aiueo</p>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
動く(流れる)文字列はどうや...
-
文字をクリックしたら別の文字...
-
CSS <div>の入れ子が反映さ...
-
css固定したフッターが本文と重...
-
1行で左寄せと右寄せと中央揃え...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
Flickity で画像にリンクを貼る...
-
youtubeをHPに載せたいです。
-
スタイルシートで位置固定する...
-
オンマウス時に別画像を上に重...
-
【CSS】floatで左右に並べた...
-
ポップアップのソースの書き方...
-
html スクロール要素を下から表...
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
jqueryのsortableで一部ソート...
-
ネストされたチェックボックス...
-
iframe内のリンクが飛ばないの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
サイトにコンテンツを並べる際...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
textareaで入力した文字を改行...
-
文字をクリックしたら別の文字...
-
css固定したフッターが本文と重...
-
Flickity で画像にリンクを貼る...
-
Ctrl+F(検索)の窓を出したいの...
-
文字を固定したいのですが…
-
背景の過
-
オンマウス時に別画像を上に重...
-
離れた場所にマウスオーバーで...
-
チェックボックスの背景色って...
-
スタイルシートで画面を上下に...
-
フッターの下に隙間ができてしまう
-
TABLEの高さを固定したいのですが…
-
floatさせたdivタグを折り返さ...
-
ポップアップのソースの書き方...
おすすめ情報