我想创建一个主页,其背景图像填充整个页面高度。在此之上,我需要添加白色文本和其他元素。
This website是我想要实现的一个例子。
我想要的:
外观: 使用下面的 CSS,文本看起来非常模糊。
#header
{
opacity: 0.2;
}
#header-inside
{
opacity: 1.0;
/* background:none repeat scroll 0% 0% #efefef; */
color:#fff;
text-shadow:2px 2px #000000;
}
#all {
background:url("back.jpeg") no-repeat fixed center center;
/*background-repeat:repeat-x;*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
最佳答案
您需要使用 mask div。看看这个 JSBin:http://jsbin.com/pefepuli/1/ (要编辑 JSBin,请参阅 this link)
如果你想知道 mask 效果是如何实现的。这一切都与掩码的 background-color
属性有关。我们提供了一个 rgba
值,代表红绿蓝 Alpha。我们可以操纵背景颜色的 alpha 来改变它的不透明度。
HTML:
<div id="pic">
<div id="mask">
<div id="txt">Your text here</div>
</div>
</div>
CSS:
body, html {
height: 100%;
width: 100%;
}
#mask {
position: relative;
height: 100%;
background-color: rgba(0,10,20,.6);
}
#pic {
background-image: url('http://d2z9qv80fklwtv.cloudfront.net/images/homescreens/7-n.jpg');
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: center;
height: 782px;
}
#txt {
position: relative;
color: #FFFFFF;
left: 150px;
top: 150px;
font-size: 20px;
}
关于html - 在整页、变暗、模糊的背景图像上添加居中文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24966945/