CSS背景

最新推荐文章于 2022-12-30 18:38:56 发布

plus21n

最新推荐文章于 2022-12-30 18:38:56 发布

阅读量121

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/plus21n/article/details/109965791

版权

本文介绍了CSS中的背景属性，包括background-image用于设置背景图片，多个图片使用逗号分隔，最上层为第一张。background-size属性用于调整背景图片大小，可以按像素或百分比设定。此外，还探讨了CSS精灵技术，通过合并小图到一张大图中，减少HTTP请求，提高页面加载速度。示例展示了如何使用background-position来定位大图中的小图。

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

CSS 背景

CSS 中包含几个新的背景属性，提供更大背景元素控制。

CSS background-image属性

CSS中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

.example1 {
    background-image: url(backgound.jpg);
    background-repeat: no-repeat;

效果：
在这里插入图片描述

CSS background-size 属性

background-size指定背景图像的大小。我们重新在不同的环境中指定背景图片的大小。可以指定像素或百分比大小。指定的大小是相对于父元素的宽度和高度的百分比的大小。

div{
    background: url(backgound.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

效果：
在这里插入图片描述

精灵图

css精灵技术，是一种处理网页背景图片的方式,简单来说就是将很多的小图集中在一张大图上，当要使用每一张小图的时候，就直接将大图作为背景，截取小图的部分即可。
为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度(将若干个小图集中到一张大图上的过程，这样加载一张大图就加载了所有的小图，避免多次请求服务器)。

如一张集合所有小图的大图，现在要截取其中的两张小图放在特定的div中。
大图如下图：
在这里插入图片描述
技术实现代码如下：

<style>
   .header-right .sousuo{
    width: 30px;
    height: 30px;
    background-image: url('img/topfoot-spr.png');
    background-repeat: no-repeat;
    background-position: -378px -33px;
}
</style>
<body>
    <div class="sousuo"></div>
</body>