背景图片属性
backgroud-image
作用:
- 引入图片
格式:
background-image:url(“图片地址”)
特点:
- 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
- 如果背景的图片小于元素,则背景图片会自动在元素中平铺
- 如果背景的图片大于元素,则背景图片有一部分将不会显示
background-repeat
作用:
- 用来设置背景的重复方式
可选值:
- repeat:默认值,背景会沿着x轴、y轴双方向重复
- repeat-x:沿着x轴方向重复
- repeat-y:沿着y轴方向重复
- no-repeat:不重复
background-position
作用:
- 设置背景图片的位置
设置方式一:
- 通过top、left、right、center、bottom几个表示方位的词来设置位置
- 使用方位词时,必须指定两个值,如果只写一个,则第二个默认为center
设置方式二:
- 通过偏移量来设置图片的位置
- 两个值表示:水平方向的偏移量 竖直方向的偏移量
例如:
.box1{
width: 500px;
height: 500px;
background-color: aqua;
background-image: url('../example/10.jpg');
background-repeat:no-repeat;
background-position: 100px 300px;
}
效果:
解析:首先设置了盒子的高度和宽度,其次设置了背景颜色,然后引入图片,最后设置图片为不重复和图片的位置
background-clip
作用:
- 设置背景的范围
可选值:
- border-box:默认值,背景会出现在边框的下边
- padding-box:背景不会出现在边框,只出现在内容区和内边距
- content-box:背景只会出现在内容区
background-origin
作用:
- 背景图片的偏移量计算的原点
可选值:
- padding-box:默认值,background-position从内边距开始计算
- content-box:背景图片的偏移量从内容区处计算
- border-box:背景图片从边框处开始计算
对比如下:
background-size
作用:
- 设置背景图片大小
第一个值表示宽度,第二个值表示高度,只设置一个值,则第二个值默认为auto,即等比例放大缩小。
例如:
background-size:200px 100px;
可选值:
- cover:图片比例不变,将元素铺满。(有可能有的位置显示不全)
- contain:图片比例不变,将图片在元素中完整显示
background-attachment
作用:
- 背景图片是否随元素移动
可选值:
- scroll:默认值,背景图片会随元素移动
- fixed:背景图片会固定在页面中,不会随元素移动
设置全屏背景
body{
background-image:url('http://5b0988e595225.cdn.sohucs.com/images/20200107/d08b5a0928f44ec4bbc5ad7bb7015e05.jpeg');
background-size:cover;
background-attachment: fixed;
background-repeat:no-repeat;
background-position:center;
}
雪碧图的制作
雪碧图:用于解决图片闪烁的问题
将多个小图片统一保存到一个大图片中,然后通过background-position来显示出。这样图片会同时加载到网页中,就可以有效避免出现闪烁的问题。
这种技术在网页中应用十分广泛,被称为CSS-Sprite,这种图我们成为雪碧图。
例一(不是雪碧图);
a:link{
display: block;
width: 50px;
height: 50px;
background-image: url(../example/6.png);
}
a:hover{
background-image: url(../example/7.png);
}
a:active{
background-image: url(../example/8.png);
}
例二(雪碧图格式):
a:link{
display: block;
width: 50px;
height: 50px;
background-image: url(../example/6.png);
}
a:hover{
background-position: -90px 0;
}
a:active{
background-position: -180px 0;
}
线性渐变
通过渐变可以设置一些复杂的背景颜色,可以从一个颜色向其他颜色过滤的效果。
渐变是图片!!!,需要通过backg-image来设置
作用:
颜色沿着一条直线发生变化
语法:
background-image: linear-gradient(颜色一,颜色二,颜色三…);
例如:
background-image: linear-gradient(red,yellow)
解释:红色在开头,蓝色在结尾,中间是过度区
线性渐变的开头,可以指定一个渐变的方向
- to left:向左渐变
- to right:向右渐变
- to bottom:向下渐变
- to top:向上渐变
- deg: 旋转度数
- turn:表示圈
渐变可以同时多个颜色,多个颜色默认情况下平均分配,也可以手动指定渐变的分布情况。
background-image: repeating-linear-gradient()表示可以平铺的线性渐变
例如:
径向渐变
放射性效果:以中心向四周去放射
语法:
background-image: radial-gradient(大小 at 位置,颜色 位置,颜色 位置,颜色 位置)
大小可选值
- circle:圆
- ellipse:椭圆
- closest-side:近边
- closest-corner:近角
- farthest-side:远边
- farthest-corner:远角
位置可选值
top right left center bottom 像素值
默认情况下,径向渐变的形状根据元素的形状来计算
长方形→圆形
长方形→椭圆形
例如: