background简写方式图片铺满元素的几种写法

June.1

于 2019-04-24 14:06:54 发布

阅读量1.7w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：其他文章标签： background

本文链接：https://blog.youkuaiyun.com/qq_39043923/article/details/89491567

其他专栏收录该内容

8 篇文章

订阅专栏

本文介绍了三种不同的CSS技巧来适配背景图片，包括裁剪铺满背景而不拉伸图片，保持图片原始比例铺满背景，以及拉伸图片完全填充元素背景的方法。

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

示例图片在这里插入图片描述
一、裁剪铺满背景,不拉伸图片形状。不要求全部展示图片的可以使用

 <style>
     .bg{
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         background: url("bg-test.jpg") no-repeat center/cover;
     }
</style>
<div class="bg"></div>
</body>

网页实际效果：
在这里插入图片描述

二、不裁剪铺满背景,不拉伸图片形状, 图片规格和屏幕一致可以使用这种方式

background: url("bg-test.jpg") no-repeat center/contain;

在这里插入图片描述

三、不裁剪铺满背景, 拉伸图片形状。让整个图片全部填满元素

background: url("bg-test.jpg") no-repeat center/100% 100%;

在这里插入图片描述