背景和雪碧图

背景

background-image

设置背景图片

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

2.如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满

3.如果背景的图片大于元素，将会一个部分背景无法显示

4.如果背景图片和元素一样大，则会直接正常显示

background-image:url();

---

background-repeat

可选值：

1.repeat默认值，背景会沿着x轴，y轴双方向重复

2.repeat-x沿着x轴方向重复

3.repeat-y沿着y轴方向重复

4.no-repeat背景图片不重复

background-position

用来设置背景图片的位置

设置方式：

1.通过 top left right bottom center 几个表示方位的词来设置背景图片位置

background-position:center center ;  //正中间
background-position:top left ;  //左上角

2.通过偏移量来指定背景图片的位置：

水平方向偏移量 垂直方向偏移量

background-position:50px 50px;

background-clip

设置背景的范围

可选值：

• border-box默认值，背景会出现在边框的下边
• padding-box 背景不会出现在边框，只出现在内容区和内边距
• content-box背景只会出现在内容区

• background-origin

背景图片的的偏移量计算的原点

• padding-box默认值，background-position从内边距开始计算

• content-box背景图片的偏移量从内容区计算

• border-box背景图片的变量从边框开始计算

• background-size

设置背景图片的大小

第一个值表示宽度

第二个值表示高度

如果只写一个，则第二个值默认是auto

background-size：100% auto;

可选值：

• cover图片的比例不变，将元素铺满
• contain图片比例不变，将图片在元素中完整显示

background-attachment

背景图片是否跟随元素移动

可选值：

• scroll默认值，背景图片会跟随元素移动
• fixed背景会固定在页面中，不会跟随元素移动

background

背景图片的相关的简写属性，所有背景相关的样式都可以通过该样式来设置

并且该样式没有顺序要求，也没有哪个属性是必须写的

注意：

background-size必须写在background-position后边，并且使用/隔开

background-position/background-size

background-origin background-clip两个样式，origin要在clip前边

超链接按钮的背景设置

<style>
a:link{
    display:block;
    width:93px;
    height:29px;
    background-image:url();
}
a:hover{
    background-position:-93px 0;
}
a:active{
    background-position:-186px 0;
}

解决图片闪烁的问题：

可以将多个小图片同意保存到一个大图片中，然后通过调整background-position来显示，这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题，这个技术在网页中应用十分广泛，被称为CSS-Sprite，叫雪碧图

雪碧图使用步骤：

1. 先确定要使用的图形
2. 测量图标大小
3. 根据测量结果创建一个元素
4. 将雪碧图设置为元素的背景图片
5. 设置一个偏移量以显示正确的图片

雪碧图特点：

• 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验

颜色的渐变

线性渐变

• background-image

线性渐变，颜色沿着一条直线发生变化

可选值：

• liner-gradient()

background-image:liner-gradient(red,yellow)

红色在开头，黄色在结尾，中间是过渡区，线性渐变的开头，我们可以指定一个渐变的方向

• to left
• to right
• to bottom
• to top
• xxxdeg（表示度数）
• turn表示圈

渐变可以同时制定多种颜色，多个颜色默认情况下平均分布，也可以手动指定简便的分布情况

<style>
    .box1{
        width: 200px;
        height: 220px;
        background-image: linear-gradient(to left,red 50px,yellow 100px);
    }
</style>

---

• repeating-linear-gradient()

可以平铺的线性渐变

径向渐变

• background-image:

可选值：

• radial-gradient

默认情况下径向渐变圆心的形状根据元素的形状来计算的：

正方形—>圆形

长方形—->椭圆形

我们也可以手动指定径向渐变大小

circle

ellipse

<style>
    .box1{
        width: 200px;
        height: 220px;
        background-image:radial-gradient(circle at center,red,yellow);
    }
</style>