CSS怎么實現網頁背景圖片自適應固定

 曉兔   2019-03-03 14:05   3,644 人飄過  12 條評論

因為不是經常做前端設計,常常是時隔好幾個月,大半年才會對一些頁面做出修改,所以每次寫CSS的時候都會發現有些知識點已經忘記,要再翻閱一遍資料,重新復習?,F在PC端和移動端的分辨率都不同,有時候想給網頁背景放一張大圖,不知道怎么樣才能自適應,不讓圖片變形,并且固定。

網上不乏各種方法,都嘗試過一遍后,發現以下這段代碼效果最佳,達到了我預期想要的表現形式(以下內容為轉載):

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
</head>
<body>
<div class="wrapper">
    <!--背景圖片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代碼 ... -->
</div>
</body>
</html>

CSS:

#web_bg{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

下面,我們來分析一下,css中每句代碼的作用是什么:

  position:fixed;
  top: 0;
  left: 0;

這三句是讓整個div固定在屏幕的最上方和最左方

  width:100%;
  height:100%;
  min-width: 1000px;

上面前兩句是讓整個div跟屏幕實現一模一樣的大小,從而達到全屏效果,而min-width是為了實現讓屏幕寬度在1000px以內時,div的大小保持不變,也就是說在這種情況下,縮放屏幕寬度時,圖片不要縮放(只有在1000px以內才有效)。

  z-index:-10;

這個的目的是讓整個div在HTML頁面中各個層級的下方,正常情況下,第一個創建的層級z-index的值是0,所以如果我們這里寫成-1也可以實現,不過這里寫-10是確保整個div在最下面,因為如果頁面中層級太多了,有的時候用-1不一定在最下面,但如果寫成-100這樣大數字的也沒有什么意義。用index:-10 以此能達到看上去像背景圖片,其實是一個最普通的div,只是層級關系變了,才讓人看上去看是背景圖片。

  background-repeat: no-repeat;

上面這個是背景不要重復

  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;

上面三句是一個意思,就是讓圖片隨屏幕大小同步縮放,但是有部分可能會被裁切,不過不至于會露白,下面兩句是為chrome和opera瀏覽器作兼容。

  background-position: center 0;

上面這句的意思就是圖片的位置,居中,靠左對齊。

 

代碼內容轉載自:https://www.cnblogs.com/neromaycry/p/8088828.html

歷史上的今天:

本文地址:http://www.yahaozhuo.cn/post/722.html
溫馨提示:文章內容系作者個人觀點,不代表曉兔個人博客對觀點贊同或支持。
版權聲明:本文為轉載文章,來源于 曉兔 ,版權歸原作者所有,歡迎分享本文,轉載請保留出處!

 發表評論


表情

  1. iui
    iui 【農民】 @回復

    不錯

  2. 玻尿酸原液
    玻尿酸原液 【農民】 @回復

    不錯。漲姿勢了,改天試試看

  3. 手機網賺
    手機網賺 【農民】 @回復

    還可以這樣 學到了!

  4. 0.0
    0.0 【農民】 @回復

    多謝樓主分享,問題已解決

  5. 淘寶刷單平臺
    淘寶刷單平臺 【農民】 @回復

    又是一個技術神啊,第一次來貴博,哈哈哈

  6. 紫書海
    紫書海 【農民】 @回復

    寫的很好,很喜歡

  7. 免費節點
    免費節點 【農民】 @回復

    如此好文章一定要留下名啊

  8. 丘八閱讀網
    丘八閱讀網 【農民】 @回復

    文章不錯,非常喜歡

  9. 免費節點
    免費節點 【農民】 @回復

    不錯學習了!

  10. 網賺博客
    網賺博客 【農民】 @回復

    文章寫得很好,拜訪站長、支持站長!

  11. 福州seo
    福州seo 【農民】 @回復

    很專業的描述。

  12. 搞機控
    搞機控 【農民】 @回復

    厲害了,這是高手。。