首先加入背景圖片
別的不說先上代碼
<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
然後帶有遮罩層的背景頁面就完成了