首先加入背景图片
别的不说先上代码
<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
然后带有遮罩层的背景页面就完成了