我试图将<div>
的透明度设置为仅影响背景色,但无论何时,它都会使整个<div>
透明。这是我的css,还有一个要演示的小提琴:
html {
background-image: url("https://dl.dropboxusercontent.com/u/47991825/8856597-daisies-green-background.jpg");
}
.profilePic {
width: 128px;
height: 128px;
border-radius: 64px;
-webkit-border-radius: 64px;
-moz-border-radius: 64px;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
#mainCont {
width: 250px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
padding: 15px;
border: 1px solid #000000;
height: 40%;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 12pt;
background-color: #000000;
opacity: 0.4;
}
#footer {
position: absolute;
bottom: 0;
height: 40px;
margin-top: 40px;
}
ul {
list-style-type: none;
padding: 0;
}
a:link {
text-decoration: none;
}
http://jsfiddle.net/joshrlangley/ne2o1r5x/1/
(背景)颜色具有rgba(r, g, b, opacity)
格式。
#mainCont {
// 0, 0, 0 = black
// 255, 255, 255 = white
background-color: rgba(0, 0, 0, 0.4);
}
http://jsfiddle.net/rudiedirkx/ne2o1r5x/2/
背景图像不幸的是,仍然没有不透明度选项。
您也可以使用rgba()
函数,而不是使用十六进制颜色格式,它看起来如下:
rgba(0, 0, 0, 0.4)
论点是这样的:
rgba(r, g, b, opacity)
希望这能有所帮助,祝你好运!