web-dev-qa-db-ja.com

CSSでdivの背景色を透明にする方法

私はCSS 3を使っていません。だから私はopacityやfilter属性を使うことができません。これらの属性を使わずにbackground-colorをdivの透明にするにはどうすればいいですか？この link の中のテキストボックスの例のようなものです。ここではテキストボックスの背景色は透明です。私は同じことをしたいのですが、上記の属性を使用しません。

csshtmlbackground-colortransparent
172
Mistu4u

不透明度はあなたに半透明性または透明性を与えます。 Fiddleの例を参照してください 。

-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 */

注： これらはCSS 3プロパティではありません

http://css-tricks.com/snippets/css/cross-browser-opacity/を参照してください

128
Paul Fleming

opacityの問題は、これが起こることを望まないことが多いときに、コンテンツにも影響することです。

要素を透明にしたいだけの場合は、次のように簡単です。

background-color: transparent;

しかし、あなたがそれをカラーにしたいならば、あなたは使うことができます：

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

または、正しいalphaを付けて保存した背景画像（1px by 1px）を定義します。
（そのためには、Gimp、Paint.Net、またはそれを可能にするその他のイメージソフトウェアを使用してください。
新しい画像を作成し、背景を削除してその中に半透明の色を付けてからpngに保存するだけです。）

René で述べたように、ブラウザがアルファをサポートしていない場合は、最善の方法は、最初のrgbaと1px by 1pxのイメージを混在させることです。

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

： http://www.w3schools.com/cssref/css_colors_legal.asp も参照してください。

デモ ： 私のJSFiddle

331
Jerska

transparent は background-color のデフォルトです。

http://www.w3schools.com/cssref/pr_background-color.asp

10
user1147171

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color から

背景色を設定するには：

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */
4
randominstanceOfLivingThing

それは議論に少し遅れるかもしれませんが、必然的に私がしたように誰かがこの記事につまずくでしょう。私が探していた答えを見つけて、私は自分の意見を投稿したいと思いました。次のJSfiddleには、.PNGを透明に重ねる方法が含まれています。 JerskaがdivのCSSの透明度属性について言及したのが解決策でした： http://jsfiddle.net/jyef3fqr/

HTML：

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS：

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS：

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

そして私の最初のインスピレーション： http://jsfiddle.net/5g1zwLe3/ 私はまた透明PNG、あるいはむしろ透明BGを持つPNGの作成にPaint.netを使用しました。

2
user3241848