雪碧图css-Web后端背景、精灵图像

目录

1.背景 background-repeat 设置背景图的重复形式 background-position 设置背景图的位置 background-clip 设置背景的范围 background-origin 背景图偏转的估计原点 background-size 设置背景图片的大小background-attachment 背景图片是否跟随元素连接

可以同时设置背景图片和背景颜色，这样背景颜色就会成为图片的背景颜色

实施例1

.box1 {
    height: 500px;
    width: 500px;
    overflow: auto;
    border: 20px red double;
    padding: 10px;
    /* 背景色 */
    background-color: darksalmon;
    /* 背景图 */
    background-image: url('/assets/背景.png');
    /* 背景图重复方式 */
    background-repeat: no-repeat;
    /* 背景图偏移位置 */
    background-position: 0 0;
    /* 背景图偏移量计算的原点 */
    background-origin: content-box;
    /* 背景范围 */
    background-clip: content-box;
    /* 背景图片大小 */
    background-size: contain;
}
.box2 {
    width: 100px;
    height: 1000px;
    background-color: orange;
    background-image: url("assets/背景2.jpg");
    background-repeat: no-repeat;
    background-position: 50px 50px;
    /* 背景图片是否跟随移动 */
    background-attachment: fixed;
}

backgound 与背景相关的缩写属性。 所有与背景相关的样式都可以通过该样式来设置。 该样式没有顺序要求雪碧图css，也没有必须写入的属性。

注意

实施例2

.box1 {
    height: 500px;
    width: 500px;
    border: 10px red double;
    padding: 10px;
    background: #bfa url("assets/dlam.png") no-repeat 100px 100px/200px padding-box content-box;
}

2. 精灵图片

解决图片闪烁问题：

可以将多张小图片保存为一张大图片，然后通过调整background-position来显示对应的图片

这样图片就会同时加载到网页中，可以有效防止闪烁问题

这种技术在网页中被广泛使用，被称为CSS-Sprite雪碧图css，这些图像被称为Sprite图像

使用精灵图的步骤：

首先确定要使用的图标。 检查图标的大小。 根据检测结果创建元素。 将精灵图像设置为元素的背景图像。 设置偏转以显示正确的图像。

精灵图片的特点：

实施例1

a:link {
    display: block;
    width: 93px;
    height: 29px;
    background: url("assets/背景/练习2-背景/btn.png");
    /* 默认值，可以不设置 */
    background-position: 0 0;
}
a:hover {
    /* 设置水平方向的一个偏移量；注意是向左移动，所以是负值 */
    background-position: -93px 0;
}
a:active {
    /* 设置水平方向的一个偏移量；注意是向左移动，所以是负值 */
    background-position: calc(-93px*2) 0;
}

下面我们来比较一下之前练习的效果。 第一次加载时会有明显的闪烁。

实施例2

.box1 {
    width: 109px;
    height: 33px;
    background: url("assets/背景/练习3-雪碧图/amazon-sprite_.png");
    /* 设置水平和垂直方向的一个偏移量；注意移动方向 */
    background-position: -10px -10px;
}
.box2 {
    width: 42px;
    height: 30px;
    background: url("assets/背景/练习3-雪碧图/amazon-sprite_.png");
    /* 设置水平和垂直方向的一个偏移量；注意移动方向 */
    background-position: -58px -338px;
}