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


191

我没有使用CSS3。所以我不能使用opacityfilter属性。不使用这些属性,如何使background-colora透明div?它应该是此链接中的文本框示例。这里的文本框背景色是透明的。我想做同样的事情,但是不使用上面提到的属性。


3
无论是opacity也不filter是CSS 3点的属性。您为什么认为不能使用它们?
Pekka 2012年

我不知道,在我的Eclipse Juno中,这两个属性均未显示,并且按照W3School:注意:CSS opacity属性是W3C CSS3建议的一部分。看到这里
Mistu4u 2012年

而且我的日食不支持(很可能是)CSS3!:(
Mistu4u 2012年

1
我想您可以忽略这些消息。一些属性超出了规范,但在现实世界中仍然可用。以及的其他一些属性的组合opacityfilter如下所示:css-tricks.com/css-transparency-settings-for-all-broswers将涵盖几乎所有浏览器
Pekka

Answers:


140

不透明度使您透明或透明。在这里查看示例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 */

注意:这些不是CSS3属性

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


1
“所以我不能使用不透明度或过滤器属性”
Jerska,2012年

4
@Jerska是一个前提,但需要询问。他不使用这些属性的唯一原因似乎是他的IDE抱怨它们
Pekka 2012年

那么还有其他方法可以实现吗?
Mistu4u 2012年

@Subir如果您需要其他方法,请参阅Jerska的答案。但是如上所述,为什么要一开始就避开似乎有些疑问opacity
Pekka 2012年

11
海报需要不透明的背景,而不是不透明的元素。使用opacity方法,元素中的文本也将是不透明的。这个答案不够完整,无法提供答案。将rgba与后备png结合使用会更好。
勒内·

351

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

如果您只是想让元素透明,那么实际上就像这样简单:

background-color: transparent;

但是,如果您希望它是彩色的,则可以使用:

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

或定义背景图像(1px1px)保存并带有右侧alpha
(要做到这一点,使用GimpPaint.Net或者其他任何图像处理软件,可以让你做到这一点。
只要创建一个新的形象,删除背景,把一个半透明的颜色,然后将它保存为PNG)。

正如René所说,最好的方法是将rgba第一个和1pxby 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

演示我的JSFiddle


3
也输入其他答案作为评论。最好的办法是使用rgba着色和此答案中描述的png作为后备。
勒内·

2
对在background-color属性上使用'transparent'的简单性不满意。超级赞!
tfont 2015年


4

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

2

讨论可能有点晚了,但不可避免地会有人像我一样偶然发现这篇文章。我找到了我想要的答案,并认为我会发表自己的看法。下面的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。


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

请为您的答案提供一些解释,并避免仅发布代码答案。
赛义德·扎尼
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.