首先加入背景图片
别的不说先上代码
<head>
<!--中间引用和配置掠过-->
<style>
body {
background-image: url("images/jumborton.jpg");
background-size: contain;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
}
.shade{
position: absolute;
background-color: #555555;
height:100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div class="shade">
<p> </p>
</div>
</body>
将style标签放在head标签中
这里我直接给body加css样式,非常方便而且效果不错。
属性解释
- background-image
这个不用多说了 背景图片的url,写前端必会属性 - background-size
也很简单,图片大小我用的是contain,把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域 - 可能大家对后面几个有些疑问 ,我来借用一下官方的解释
1、-moz代表firefox浏览器私有属性
2、-ms代表ie浏览器私有属性
3、-webkit代表safari、chrome私有属性这些是为了兼容老版本的写法,比较新版本的浏览器都支持直接写:border-radius。现在比较流行的一个概念就是:不太关键的样式,可以不考虑兼容,比如你说的圆角,并不影响内容的显示,如果客户浏览器太旧,就让他看到旧的方形效果就是,一定要看到新效果,只能建议客户升级浏览器。
加入遮罩层
也就是我写的.shade的div层
其实很简单,但是我填一个坑
如果要用百分号标识width和height,注意最好使用position:absoluate
然后带有遮罩层的背景页面就完成了