所以我遇到了问题。我环顾四周,环顾四周,但没有运气。我想让我的身体背景透明但让文字不透明。就像现在一样,我一直在做同样的不透明度。这是我的代码:
@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;
}
这是我的网站(点击链接不要在你的网址中输入“tccraft.net”它会带你到facebook页面):http://tccraft.net/index.php 谢谢!
答案 0 :(得分:137)
请勿使用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);
}
有关css。
中rgba值的更多信息和示例,请参阅http://css-tricks.com/rgba-browser-support/答案 1 :(得分:13)
对于完全透明的背景使用:
background: transparent;
否则使用半透明颜色填充:
background: rgba(255,255,255,0.5); // or hsla(0, 0%, 100%, 0.5)
其中值为:
background: rgba(red,green,blue,opacity); // or hsla(hue, saturation, lightness, opacity)
您还可以将rgba值用于渐变背景。
要在图像背景上获得透明度,只需在预先选择的图像编辑器中降低图像的不透明度。
答案 2 :(得分:2)
opacity
会使文字和背景都透明。例如,使用rgba()
值,使用半透明背景颜色。适用于IE8 +
答案 3 :(得分:0)
如果您将RGBA用于现代浏览器,则不需要让较旧的IE仅使用RGB的给定颜色的非透明版本。
如果您不坚持仅使用CSS的解决方案,请尝试CSS3PIE。使用此语法,您可以在现代浏览器中看到的旧IE中看到完全相同的结果:
div {
-pie-background: rgba(223,231,233,0.8);
behavior: url(../PIE.htc);
}
答案 4 :(得分:0)
要使您的身体背景透明,请尝试这种样式,它对我有用,在所需颜色代码的末尾添加“广告”
background-color: #42413Cad !important;
答案 5 :(得分:-1)
box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.54);