码迷,mamicode.com
首页 > 其他好文 > 详细

背景图片填充div

时间:2017-12-03 19:57:39      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:over   justify   nbsp   宽度   1.5   height   不一致   100%   情况下   

 

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%;

 

背景图片填充div

标签:over   justify   nbsp   宽度   1.5   height   不一致   100%   情况下   

原文地址:http://www.cnblogs.com/haimengqingyuan/p/7966817.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!