7

このhtmlを考えると

    <div id="my_div">   
    </div>

CSS

         #my_div {
            width: 100px;
            height: 100px; 
            background-color: #0f0;
            opacity: 0.4; 
            border: 3px solid #ff0000;
         }

独自の div タグがopacity必要ですが、境界線も必要ありません。

CSSは「不透明度」要素の「非不透明度」境界線を作成できますか?

4

5 に答える 5

7

属性はありませんが、non-opacityできることはその div の背景色を RGBA で設定することです。これにより、基本的に不透明度を指定できますが、背景のみを指定できます (境界線には影響しません)。

background: rgba(0, 255, 0, 0.4);

これにより、透明に見える背景を持つ赤い境界線である、目的が達成されます。デモはこちら. ただし、画像やテキストなどの内部コンテンツは透明になりません。親の境界を気にせずに、これらの要素の不透明度を自由に設定できますが。

不透明度と RGBA の違いについて詳しく説明している記事は、こことここにあります。

予想通り、IE8 以下は RGBA をサポートしていませんが、 CSS3 PIEで「ハッキング」できます。

于 2012-11-27T14:23:32.773 に答える
5

CSS3 を使用しますrgba。これは CSS であるため、ここではクロスブラウザーが問題になりますが、IE の場合は CSS3 Pieを使用できます

#my_div {
     width: 100px;
     height: 100px; 
     background-color: rgba(R, G, B, A);
     border: 3px solid #ff0000;
}

デモ

さらに、rgba()for opaque コンテナをopacity: .7使用しても、以前のようにテキストが不透明になることはありません...

于 2012-11-27T14:22:50.970 に答える
2

残念ながら、要素に不透明度を適用すると、要素に適用されたマージン、パディング、または境界線にも適用されます。

最善の解決策は、(以前に投稿したように) rgba を使用し、1x1 の不透明な png をレガシー ブラウザー (サポートしている場合) のフォールバックとして使用し、それを要素の背景画像として使用することです。

opacity プロパティを使用することの欠点の 1 つは、#my_div にコンテンツ (テキストまたは画像) が含まれている場合、コンテンツ自体にもその不透明度が含まれ、望ましくないスタイルになる可能性があることです。

于 2012-11-27T14:27:47.533 に答える
2

この質問に対する受け入れられた回答を参照してください: https://stackoverflow.com/a/4062032/1068266

境界線の色に RGBA 形式を使用できると記載されており、「A」値を設定することで境界線の不透明度を設定できます。ただし、コメントに記載されているように、不透明度 CSS プロパティは、境界線を含むオブジェクト全体の不透明度を設定します。

于 2012-11-27T14:24:49.890 に答える
1

残念ながら、唯一の方法は、境界線を持つ別の div で div をラップすることです 。方法の 1 つは次のようになります (すべての内部要素の不透明度を維持します)。

<div class="border">
    <div id="my_div">   
    </div>
</div>

CSS:

.border{
   border: 3px solid #ff0000;
   width: 100px;
   height: 100px; 
}
#my_div {
   width: 100px;
   height: 100px; 
   background-color: #0f0;
   opacity: 0.4;                 
}

または、他の人が言ったように:背景色にはrgbaですが、その場合、すべての内部コンテンツは非透明のままになります

于 2012-11-27T14:22:55.400 に答える