2

左下隅のみのdivに不透明度を与えたい。出来ますか？どうやって？

<div id="right_img"></div>

CSS

#right_img
{
     float:right;
     width:600px;
     height:400px;
     margin-top:100px;
     background:url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
     opacity:0.6;
     filter:alpha(opacity=60); 
}

div全体に不透明度を与えると、画像の鮮明さが失われます。

4

2 に答える 2

3

代わりに PNG 画像を使用して、透明部分を画像の一部にしますか?

于 2012-07-31T07:49:48.627 に答える
2

要素に不透明度を与えると、常に要素全体とそのすべての子要素にも影響します。その子の 1 つだけに opacity プロパティを与えたい場合は、その要素で直接宣言する必要があります。必要な効果を得るために、いくつかのヘルパー要素を導入する必要がある場合があります。

例外は、子要素に継承されない色で宣言する不透明度です。新しいrgba()宣言 (4 番目のパラメーターは色の不透明度) を使用すると、「透明な」div (透明な背景) を持つような効果を実現できますが、フォントは完全に不透明です。

あなたの場合、このrgba背景色で通常の背景宣言を使用するだけで十分かもしれません(あなたの答えを解釈する - あまり明確ではありませんでした):

#right_img{
   background:rgba(x,y,z,0.6) url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
}

とx,y,z = 0...255_a = 0...1

rgba()宣言は古い IE (IE8 でさえも!) ではサポートされていないことに注意してください。これらをサポートするにはフィルターが必要です。幸いなことに、次の 1 つがあります。

filter:progid:DXImageTransform.Microsoft.gradient(
           startColorstr=#aaxxyyzz,
           endColorstr  =#aaxxyyzz);

0% = 00ここで、最初のパラメーター (a) はとの不透明度100% = FFです。そしてxx,yy,zz = 00...FF。

于 2012-07-31T07:41:13.157 に答える