如何在CSS中使div背景颜色透明-Java 学习之路

172

我'm not using CSS3. So I can' t使用 opacity 或 filter 属性 . 如果不使用这些属性，如何使 background-color 透明 div ？它应该是link中的文本框示例 . 此处文本框背景颜色是透明的 . 我想做同样的事，但不使用上面提到的属性 .

5 回答

不透明度为您提供半透明或透明度 . 查看示例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/

回复于 2024-04-19T17:24:44+08:00

328
opacity 的问题在于它也会影响内容，而通常你不希望这种情况发生 .

如果你只想让你的元素透明，它就像下面这样简单：
```
background-color: transparent;
```
但如果你想要它的颜色，你可以使用：
```
background-color: rgba(255, 0, 0, 0.4);
```
或者使用右侧 alpha 定义背景图像（ 1px ， 1px ） .
（为此，请使用 Gimp ， Paint.Net 或任何其他允许您执行此操作的图像软件 .
只需创建一个新图像，删除背景并在其中放入半透明颜色，然后将其保存在png中 . ）

正如René所说，最好的办法是混合使用 rgba 和 1px by 1px 图像作为后备，如果浏览器不支持alpha：
```
background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);
```
See also ：http://www.w3schools.com/cssref/css_colors_legal.asp .

Demo ：My JSFiddle
回复于 2024-04-19T17:24:44+08:00
2

transparent 是 background-color 的默认值

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

回复于 2024-04-19T17:24:44+08:00

128

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

回复于 2024-04-19T17:24:44+08:00

讨论可能有点晚，但不可避免地会有人像我一样偶然发现这篇文章 . 我找到了我正在寻找的答案，并认为我是透明的 . Jerska 's mention of the transparency attribute for the 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创建了透明BG的透明PNG 's, or rather the PNG' .

回复于 2024-04-19T17:24:44+08:00

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

5 回答

相关问题