前端CSS實現圖片自適應背景大小

本文轉載自查看原文 2019-06-10 23:57 2741 前端之CSS

<body>
<div>
    <!--背景圖片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代碼 ... -->
</div>
</body>

以上是需求代碼

以下是實現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;
}

通過以上操作，我們可以實現將一張圖片作為網頁背景，且不會因為瀏覽器的尺寸導致留白和重復

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css實現圖片大小自適應使用css 實現圖片自適應大小背景圖片自適應大小(css3) 如何通過CSS實現背景圖片自動平鋪或拉伸至整個屏幕（自適應大小）前端：如何讓background背景圖片進行CSS自適應 CSS實現自適應不同大小屏幕的背景大圖 CSS實現背景圖片屏幕自適應 CSS實現背景圖片屏幕自適應 css img圖片和背景圖片按容器大小自適應大小（居中裁切）自適應大小的背景圖片