1

一部のテキストに不透明度のある背景色を使用したいのですが、不透明度を背景色のみに設定したいのです。私の例では、不透明度はカラーとバックの両方に適用されます。不透明度を背景色だけに保つにはどうすればよいですか？

http://jsfiddle.net/YA7Sw/

        <div class="col left">
            <p class="last"><span class="back" >here goes some text</span></p>
        </div>


p.last {
    color: #000000;
    font-family: helvetica,arial,sans-serif;
    font-size: 10px;
    font-weight: normal;
    line-height: 17px;
    margin-bottom: 17px;
}

.back { padding:5px;background-color:#893409;opacity:0.3; }​
4

4 に答える 4

2

スパンの不透明度を設定するのではなく、 rgba表記を使用して背景色のアルファを設定するだけです。

.back { padding:5px;background-color:rgba(137, 52, 9, 0.3); }​

デモンストレーション： http： //jsfiddle.net/hRzMa/

pではなく、に追加することもできますspan。

段落のデモンストレーション：http：//jsfiddle.net/9gqYn/

于 2012-07-11T12:51:09.743 に答える
0

透明な背景を使用したいようです。次のようなものを試してください。

p.last
{
    background: rgb(54, 25, 25); /* Fall-back for browsers that don't support rgba */
    background: rgba(54, 25, 25, .5);
}

http://jsfiddle.net/ashwyn/MDcq2/

于 2012-07-11T12:52:06.957 に答える
0

これで問題が解決します。rgbaを使用するだけです

<p class="last"><span class="back" >here goes some text</span></p>
</div>
<style>
p.last {
color: #000000;
font-family: helvetica,arial,sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 17px;
margin-bottom: 17px;

 }

 .back { padding:5px;
background-color: rgba(180,38,22, 0.2); }​
 </style>
于 2012-07-11T13:08:44.703 に答える