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

CSS3を使用していません。つまりopacity、filter属性を使用することはできません。これらの属性を使用せずに、どうすればbackground-color透明化できますかdiv？これは、このリンクのテキストボックスの例のようなものです。ここでは、テキストボックスの背景色は透明です。同じことをしたいのですが、上記の属性を使用しません。

不透明度は、透明度または透明度を提供します。こちらのフィドルの例をご覧ください。

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

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

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

の問題opacityは、多くの場合、これが発生したくない場合に、コンテンツにも影響することです。

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

background-color: transparent;

しかし、色で表示したい場合は、次を使用できます。

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

または、右で保存1pxされた（によって1px）背景画像を定義しますalpha。
（ので、使用を行うにはGimp、Paint.Netまたはあなたがそれを行うことを可能にする任意の他の画像ソフトを。
ただ、その後、PNGに保存し、背景を削除し、その中に半透明の色を入れて、新しいイメージを作成します。）

Renéが言ったように、ブラウザーがalphaをサポートしていない場合、フォールバックとしてrgba最初の画像と1pxby 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

背景色のデフォルトは透明です

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

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

少し遅れるかもしれませんが、私のように誰かがこの投稿に偶然出くわすでしょう。私が探していた答えを見つけ、自分の意見を投稿したいと思いました。次の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も使用しました。

    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */