背景图片填充div

最新推荐文章于 2024-10-09 08:55:16 发布

weixin_30847939

最新推荐文章于 2024-10-09 08:55:16 发布

阅读量234

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/haimengqingyuan/p/7966817.html

本文探讨了使用CSS设置背景图片的不同方式，包括如何让图片填充整个div元素同时保持比例，以及如何精确调整图片的位置和大小以达到理想的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/haimengqingyuan/p/7966817.html