1.背景色
background-color: red;
2.背景图片
background-image: url(a.jpg);
3.背景图片的平铺方式
background-repeat: no-repeat;
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 竖直平铺
4.背景图片是否跟随屏幕滚动
background-attachment: fixed;
fixed:固定;
scroll:滚动;
5.背景图位置
需要填写两个值:x轴位置,y轴位置,如果一个样式里需要填写多个值,值与值之间用空格隔开.
1.用单词表示位置
x轴:left,center,right
y轴:top,center,bottom
background-position: center bottom;
2.用具体的数值
3.使用百分比
实际上还是在使用具体的数值,计算公式如下:
x:(容器的宽度-元素的宽度)* 百分比值
y:(容器的高度-元素的高度)* 百分比值
背景设置的简写方式
1.颜色
2.图片路径
3.是否平铺
4.是否跟随滚动
5.图片位置
例子:
background: #000 url(1.jpg) no-repeat fixed center center;
在书写复合属性时,如果一个属性的值有多个,
那么这多个属性值必须相连,不可分开(像background-position)
6.第一张图片的起始位置
background-origin: padding-box;
1.border-box:从边框开始
2.padding-box:默认从padding开始
3.content-box:从内容开始
7.background-clip:背景剪裁
1.border-box:从边框开始
2.padding-box:默认从padding开始
3.content-box:从内容开始
8.背景蒙版
1.只有chrome浏览器支持
2.蒙版图片必须是png图片,jpg的不行.
3.设置成蒙版的图片,系统会把原来不透明的部分处理成透明的部分,
透明的部分处理成不透明的.
/*设置蒙版*/
-webkit-mask-image: url(haha.png);
/*蒙版的位置
* x轴的偏移量
* y轴的偏移量
*/
-webkit-mask-position:120px 130px;
9.background支持多个值
background支持多个值,一般应用在背景图片的拼凑上
如果写多组值,可以理解成先写谁,谁在上面.
每组值用逗号隔开,最后一组加分号.
例子:
background:url(../day01/img/try.png) no-repeat left top,
url(../day01/img/try.png) no-repeat right top,
url(../day01/img/try.png) no-repeat left bottom,
url(../day01/img/try.png) no-repeat right bottom,
url(../day03/作业/code.png) repeat center center;
10.背景渐变
渐变相当于一个元素的背景图进行设置。要实现渐变,至少要有两种颜色.
1.线性渐变:兼容性不好,需要前缀添加内核.
写法1:background:linear-gradient(方向,颜色1,颜色2,颜色3...);
写法2:background:linear-gradient(方向,颜色1 开始渐变位置(百分比),...);
2.径向渐变: 呈圆形的一种渐变方式
background:radial-gradient(半径 形状(圆形或者椭圆形) at 圆心,颜色1 位置1,...);
1.半径:
farthest-side(最远边),
farthest-corner(最远角),
closest-side,closest-corner.
2.形状:circle(圆形),ellipse(椭圆形).
3.at 别忘了
4.圆心:(x,y)给具体的px值,默认在元素的中心点;
给具体的单词方位:left,right,top,bottom,center
如果选择上述对应的组合,那么半径选择时不要选择最近边和最近角(造成半径为0),不会显示渐变.
3.重复渐变
重复线性渐变: 语法跟线性渐变一样,唯一区别就是当出现纯色时,重复线性渐变不会显示纯色,而是再出现一组渐变.
background: -webkit-repeating-linear-gradient
(left,#fff 0%,#fff 10%,transparent 10%,transparent 20%);
重复径向渐变: 语法跟径向渐变一样,唯一区别就是当出现纯色时,重复径向渐变不会显示纯色,而是再出现一组渐变
4.倒影
关于倒影的渐变,只能设置不透明颜色和透明颜色之间的渐变
1.兼容性不太好,webkit内核支持
2.倒影只是一个映像,不占空间.
语法规则:
box-reflect:倒影的位置与实物的距离(像素值px) 渐变/蒙版
位置:
below:在XX的下面
ablove:在XX的上面
left:左边
right:右边
ps:
-webkit-box-reflect:below 10px
-webkit-linear-gradient(transparent,transparent 50%,
rgba(255,255,255,0.3));
11.背景透明文字不透明
解决办法1:
使用background:rgba();
不使用background:颜色;opacity:0~1;
解决办法2:
一个div上有另外一个包含文字的div,下层div设置opacity.
12.常用的浏览器内核
- -webkit-:safari,chrome的内核
- -moz-:火狐的内核
- -ms-:IE的内核
- -o-:欧鹏的内核