背景圖片填充div


 

html:
<div class=”contain-title”><div>

css:
(1)這種情況下圖片可以填充整個div,但背景色和原背景圖片不一致
background: url(../images/mall-bg.png) no-repeat center center fixed;
height: 11.5rem;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: flex;
justify-content: space-around;
align-items: center;

(2)和背景圖片基本一致,但背景圖片在寬度上沒有填充整個div,左右兩邊有間距
background: url(../images/mall-bg.png);
background-size: 100%;
height: 9rem;

(3)背景圖片在寬度上填充整個div,且基本與原背景圖片效果一致
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
background: url(../images/mall-bg.png);
height: 9rem;
background-position: center;
background-size: 110% 100%;

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM