網頁背景圖片加遮罩層詳解

首先加入背景圖片

別的不說先上代碼

<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>&nbsp;</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。現在比較流行的一個概念就是:不太關鍵的樣式,可以不考慮兼容,比如你說的圓角,並不影響內容的顯示,如果客戶瀏覽器太舊,就讓他看到舊的方形效果就是,一定要看到新效果,只能建議客戶升級瀏覽器。

引用百度知道 https://zhidao.baidu.com/question/364311602.html

加入遮罩層

也就是我寫的.shade的div層
其實很簡單,但是我填一個坑
如果要用百分號標識width和height,注意最好使用position:absoluate

在這裏插入圖片描述

來自 www.w3school.com.cn

然後帶有遮罩層的背景頁面就完成了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章