HTML背景图片的设置

最新推荐文章于 2025-04-14 10:07:25 发布

.慢慢亦漫漫

最新推荐文章于 2025-04-14 10:07:25 发布

阅读量3.8w

点赞数 63

分类专栏： css 文章标签： html css css3

本文链接：https://blog.youkuaiyun.com/weixin_43183219/article/details/122331135

版权

本文详细介绍了HTML背景图片的插入方法以及相关属性的设置，包括background-size（cover、contain及具体值）、background-repeat（repeat、repeat-x、repeat-y、space、round、no-repeat）、background-position、background-origin（border-box、padding-box、content-box）和background-attachment（scroll、fixed、local）的使用和效果展示。

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

1.背景图片的插入方法

行内样式插入背景图：< div style=“background-image: url(./imges/boluo.PNG);”>
在css样式表中引入背景图
注意：设置背景图片的元素一定要有具体的宽度和高度，否则会导致背景图片无法显示

2.背景图相关属性的设置

2.1 background-size属性

background-size：设置背景图大小，它的属性值有：cover、contain和具体的宽度和高度值
（1）cover：浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外，也就是说图像铺满了盒子，但是会有一部分被剪切了

 div{
   
        width: 1000px;
        height: 680px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size: cover;

    }

代码展示效果：
cover展示效果
（2）contain：浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。

  div{
   
        width: 1000px;
        height: 680px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size: contain;

    }

contain的展示效果
通过contain和cover的展示效果可以明显看出来两者的差距
（3）设置具体值：根据自己的需要设置具体的宽和高的值

 div{
   
        width: 1000px;
        height: 680px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;

    }