私はCSS3を使っていません。そのため,opacity
やfilter
といった属性を使うことができません。これらの属性を使わずに、div
のbackground-color
を透明にするにはどうしたらいいでしょうか?これは、このlinkのテキストボックスの例のようなものです。ここでは、テキストボックスの背景色が透明になっています。同じことをしたいのですが、上記の属性を使わずにしたいのです。
不透明度」の問題点は、コンテンツにも影響を与えてしまうことで、これを避けたい場合もあります。
単に要素を透明にしたいだけなら、次のように簡単にできます。
background-color: transparent;
しかし、色付きにしたい場合には
background-color: rgba(255, 0, 0, 0.4);
または、正しい alpha
で保存された背景画像 (1px
by 1px
) を定義します。
(そのためには、Gimp
やPaint.Net
などの画像ソフトを使ってください。
新しい画像を作って、背景を消して、半透明の色を入れて、pngで保存するだけです)
René](https://stackoverflow.com/users/449444/rene-geuze)さんがおっしゃるように、`rgba`を先にして、`1pxby
1px` の画像を、ブラウザがアルファをサポートしていない場合の予備として、両方を混ぜるのが一番いいでしょうね。
background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);
See also : http://www.w3schools.com/cssref/css_colors_legal.asp.
Demo :[私のJSFiddle](
)不透明度は、半透明または透過性を表します。例を見てみましょう[Fiddle here][1]。
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
http://css-tricks.com/snippets/css/cross-browser-opacity/][3]を参照してください。