CSS背景

最新推荐文章于 2022-01-18 01:29:44 发布

plus21n

最新推荐文章于 2022-01-18 01:29:44 发布

阅读量88

点赞数

文章标签： css

本文链接：https://blog.csdn.net/plus21n/article/details/109965791

版权

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>

上面的代码中最重要的是背景图后面的位置的设置，这个分别是以大图的左上角为参考点，水平距离(大图的左上角和小图的左上角水平距离)大小和竖直距离(大图的左上角和小图的左上角水平距离)大小，由于向右和向下时负方向，所以值都是负的。主要用background-position来确定目标图片的确切位置

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

plus21n

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS背景

CSS 背景CSS 中包含几个新的背景属性，提供更大背景元素控制。CSS background-image属性CSS中可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。.example1 { background-image: url(backgound.jpg); background-repeat: no-repeat;效果CSS background-size 属性background-siz
复制链接

扫一扫