0

さて、これが私のCSSスタイルシートです。

 #mainheader,#content{
    opacity:0.35;
    text-align:center;
    background-color:#000000;
    border-top-style:ridge;
    border-left-style:ridge;
    border-right-style:ridge;
    border-bottom-style:ridge;
}

ご覧のとおり、透けて見えるボックスですが、テキストがぼやけて見える小さな黒い背景があります。例。

http://i.stack.imgur.com/18dOZ.png

その背景色を取り除くと、このようなより明確なテキストが得られます...

http://i.stack.imgur.com/ixLva.png

さて、私が言おうとしているのは、そのボックスの上にあるテキストを非常に明確なテキストにするために何を書くことができるかということであり、暗い不透明度ではありません。

4

5 に答える 5

5

CSS3 を使用する場合は、次を試してください。

background-color: rgba(0,0,0,0.35);

の代わりにopacity。

http://jsfiddle.net/vsZtM/

RGBA に関する W3.org からの参照:
http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgba-color
http://www.w3.org/wiki/CSS3/Color/ RGBA

于 2013-06-01T02:31:17.877 に答える
3

不透明度の代わりに、アルファ チャネルを使用してコンテナーの背景を変更します。

#mainheader,#content { 
background: rgba(0,0,0,0.35);
}

最後のパラメーターは不透明度です。

于 2013-06-01T02:31:08.127 に答える
3

Opacity changes the opacity for the entire element, while background:rgba(0,0,0,.35) will change only the background color.

于 2013-06-01T02:39:32.933 に答える
2

を値background-colorとして設定し、CSS ステートメントで を省略できます。例えば：rgbaopacity

#mainheader,#content{
    text-align:center;
    background-color: rgba(0, 0, 0, .35);
    border-top-style:ridge;
    border-left-style:ridge;
    border-right-style:ridge;
    border-bottom-style:ridge;
}

これにより、テキストは完全に不透明のままになり、背景は半透明になります。ただし、これは Internet Explorer 8 以下では機能しません。これは無地の背景になります。

于 2013-06-01T02:32:11.827 に答える
2

rgba代わりに次のopacityように使用してみてください。

background-color: rgba(0,0,0,0.35);

注: これは CSS3 であり、IE9 以降でのみ機能するため、他のバージョンでは次のようにフォールバックを提供する必要があります。

background-color: #000;
background-color: rgba(0,0,0,0.35);
于 2013-06-01T02:41:12.083 に答える