背景图片填充div

Posted 艳阳天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了背景图片填充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%;

 

以上是关于背景图片填充div的主要内容,如果未能解决你的问题,请参考以下文章

如何用渐变色填充部分背景?

炫酷 CSS 背景效果的 10 个代码片段

html5 两个canvas重叠放在一个div里面,每个canvas各填充一张图片,代码怎么写?

背景图片填充div

用背景填充div

使 <div> 的背景色填充封闭的 <td>