Question

我没有使用CSS3。因此，我无法使用opacity或filter属性。如果不使用这些属性，我如何才能使background-color透明div？它应该是此link中的文本框示例。此处文本框背景颜色是透明的。我想做同样的事，但不使用上面提到的属性。

Answer 1

opacity的问题在于，当您不希望这种情况发生时，它也会影响内容。

如果您只想让您的元素透明，那就非常简单：

background-color: transparent;

但是如果你想要它的颜色，你可以使用：

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

或定义使用右侧1px保存的背景图片（1px alpha）。（为此，请使用Gimp，Paint.Net或任何其他允许您执行此操作的图像软件。
只需创建一个新图像，删除背景并在其中放入半透明颜色，然后将其保存在png中。）

正如René所述，最好的办法是混合使用rgba第一个和1px按1px图像作为后备广告浏览器不支持alpha：

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

另见：http://www.w3schools.com/cssref/css_colors_legal.asp。

演示：My JSFiddle

Answer 2

不透明度为您提供半透明或透明度。查看示例Fiddle here。

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

注意：these are NOT CSS3 properties

请参阅http://css-tricks.com/snippets/css/cross-browser-opacity/

Answer 3

透明是 background-color

的默认设置

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

Answer 4

来自https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

设置背景颜色：

modules

Answer 5

讨论可能有点晚，但不可避免地会有人像我一样偶然发现这篇文章。我找到了我正在寻找的答案，并认为我会发布自己的看法。以下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/ 我还使用paint.net创建了透明的PNG，或者更确切地说是使用透明BG的PNG。

Answer 6

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

Answer 7

使用类似的东西

<div style='background-color: rgba(0, 0, 0, 0.4);'>

这会将所述 div 的背景颜色设置为黑色，但也设置为 40% 透明。这不会更改 div 透明度的文本或内容。

如何在CSS中使div背景颜色透明

7 个答案: