HTML / CSS文字背景透明,但文字不是
所以我有一个问题。 我环顾四周,环顾四周,但没有运气。 我想使我的身体背景透明,但让文本不透明。 因为现在我一直在做同样的不透明。 这是我的代码:
@charset "utf-8"; body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; opacity:1; } a img { border: none; } a:link { color: #42413C; text-decoration: underline; } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } .container { width: 750px; margin: 0 auto; } .content { padding:20px; width:710px; position:relative; background:#CCC; opacity: 0.5; } .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } .header { top:0%; width: 750px; height: 200px; background-image: url(images/header.png); background-repeat:no-repeat; background-position:center; } .navbar { height: 50px; width: 750px; position: relative; z-index: 2; } #bg { position: fixed; top: 25%; left: 15%; z-index: -1; } div { display: block; }
这里是我的网站(点击链接不要input“tccraft.net”在你的url,它会带你到Facebook页面): http ://tccraft.net/index.php谢谢你!
不要为此使用opacity
,请将背景设置为RGBA值,而不是仅将背景设置为半透明。 在你的情况下,会是这样的。
.content { padding:20px; width:710px; position:relative; background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */ background: rgba(204, 204, 204, 0.5); }
请参阅http://css-tricks.com/rgba-browser-support/了解更多信息和css中的rgba-values的示例。;
对于完全透明的背景使用:
background: transparent;
否则,对于半透明的颜色填充使用:
background: rgba(255,255,255,0.5);
其中的值是:
background: rgba(red,green,blue,opacity);
您也可以使用rgba值作为渐变背景。
要在图像背景上获得透明度,只需事先select图像编辑器中的图像不透明度即可。
opacity
将使文本和背景透明。 例如,使用rgba()
值来代替使用半透明背景色。 适用于IE8 +
如果您在现代浏览器中使用RGBA,则不需要让较旧的IE仅使用RGB的非透明版本的给定颜色。
如果你不坚持CSS的解决scheme,试试CSS3PIE 。 使用这个语法,您可以在现代浏览器中看到的老版IE中看到完全相同的结果:
div { -pie-background: rgba(223,231,233,0.8); behavior: url(../PIE.htc); }