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

Question

我没有使用CSS3.所以我不能使用opacity或filter属性.如果不使用这些属性,我怎样才能使background-color透明化div？它应该是此链接中的文本框示例.此处文本框背景颜色是透明的.我想做同样的事,但不使用上面提到的属性.

Answer 1

问题opacity是它会影响内容,而通常你不希望这种情况发生.

如果你只想让你的元素透明,它就像下面这样简单:

background-color: transparent;

但如果你想要它的颜色,你可以使用:

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

或者定义右侧保存的背景图像(1pxby 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

Answer 2

不透明度为您提供半透明或透明度.在这里查看一个例子.

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

Answer 3

transparent是background-color的默认值

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

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