背景属性(background)
1. 定义
background 设置背景的显示方式,是一个间歇属性
设置顺序为:background-color background-image background-repeat background-attachment background-position
可以设置如下属性:
-
background-color 背景颜色
-
background-image 背景图片
-
background-repeat 背景平铺方式
-
background-attachment 背景图片固定方式
-
background-position 背景图片位置
-
background-size 背景图片尺寸
-
background-origin 背景图片显示区域
-
background-clip 背景显示区域
-
inherit 继承父元素的背景属性样式
p { background: #ff0000 url() no-repeat fixed center; }
2. 背景颜色(background-color)
background-color 属性设置元素的背景颜⾊
元素背景范围 background-color 属性为元素设置⼀种纯⾊。这种颜⾊会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景⾊。
取值:
-
transparent 默认,透明背景
-
color_name 颜色名称,比如red
-
hex_number 十六进制颜色,比如#ff000
-
rgb_number rgb色值,比如rgb(255,0,0)或者rgba(255,0,0,.2)
-
inherit 继承父元素背景色
div { background-color: red; }
h1 { background-color: #ff0000; }
p { background-color: rgb(255, 0, 0); }
3. 背景图片(background-image)
background-image 属性设置元素的背景图⽚,元素的背景占据了元素的全部尺⼨,包括内边距和边框,但不包括外边距。 默认,背景图像位于元素的左上⻆,并在⽔平和垂直⽅向上重复。
p { background-image:url("./img.jpg") }
4. 背景平铺(background-repeat)
background-repeat 属性设置是否重复背景图像。 取值:
-
repeat 默认值,⽔平垂直⽅向上平铺
-
no-repeat 不平铺
-
repeat-x ⽔平⽅向平铺
-
repeat-y 垂直⽅向平铺
div { background-repeat:no-repeat; // 不平铺 }
div { background-repeat:repeat; // 默认值,⽔平垂直⽅向上平铺 }
div { background-repeat:repeat-x; // ⽔平⽅向平铺 }
div { background-repeat:repeat-y; // 垂直⽅向平铺 }
5. 背景图片固定(background-attachment)
background-attachment 属性设置背景图像是否固定或者随着⻚⾯的其余部分滚动。 取值:
-
scroll 默认值。背景图像会随着⻚⾯其余部分的滚动⽽移动
-
fixed 当页面的其余部分滚动时,背景图像不会滚动
div { background-image:url("");
background-repeat:no-repeat;
background-attachment:fixed;
}
div { background-image:url("");
background-repeat:no-repeat;
background-attachment:scroll;
}
6. 背景定位(background-position)
background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像的位置,背景图像如果要重复,将从这⼀点开始。 取值:
-
上下 左右 第一个位置定义上下的位置(top/center/bottom),第二个定义左右位置(left/center/right),如果仅定义一个值,第二个值为 center
-
x y 第一个值为水平位置,第二个为垂直位置,可以是百分比或者px,如果仅定义一个值,第二个值为50%
div { background-position: top left; }
div { background-position: center; }
div { background-position: 20% 60%; }
div { background-position: 0 10px; }
div { background-position: 50% 10px; }
7. 背景图片尺寸(background-size)【CSS3】
background-size 属性规定背景图像的尺寸。 取值:
-
length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
-
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
-
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
-
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
div { background-size:80px 60px; }
div { background-size:50% 50%; }
div { background-size:cover; }
div { background-size:contain; }
8. 背景图片显示区域(background-origin)【CSS3】
background-origin 属性规定 background-position 属性相对于什么位置来定位。 注意:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。 取值:
-
padding-box 默认值,背景图像相对于内边距定位
-
border-box 背景图像相对于边框定位
-
content-box 背景图像相对于内容边框定位
div { background-origin:padding-box; }
div { background-origin:border-box; }
div { background-origin:content-box; }
9. 背景显示区域(background-clip)【CSS3】
background-clip 属性规定背景的绘制区域。 取值:
-
border-box 默认值,背景填充全部
-
padding-box 背景填充不包括边框
-
content-box 背景只填充内容部分
div { backgorund-color:red; background-cilp:border-box; }
div { backgorund-color:red; background-cilp:padding-box; }
div { backgorund-color:red; background-cilp:content-box; }
2 雪碧图 /精灵图(CSS Sprites)
碧图就是将很多很多的小图标放在一张图片上,就称之为雪碧图 使用雪碧图的优势:
-
将多张图片合并到一张图片中,可以减小图片的总大小。
-
将多张图片合并成一张图片后,下载全部所需的资源,只需一次请求。可以减小建立连接的消耗。
https://kmdjs.github.io/arejs-tool-sprite/
<style>
div{
width: 30px;
height: 30px;
border: 1px solid #f00;
background: url('./淘宝雪碧图.png') no-repeat;
}
.box1{
background-position: 3px 3px;
}
.box2{
/* 通过背景图片定位,调整图片的位置 */
background-position: 3px -40px;
}
</style>
</head>
<body>
<div class='box1'></div>
<div class='box2'></div>
2.1 为什么使用雪碧图
网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题,如果每个小图标都单独调用一张图片, 即意味着每个小图标的显示都产生一个HTTP请求;每个请求都需要一定的性能开销,主要在请求、以及响应阶段。为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标、登录框图片等,使用的并不是标签,而是CSS Sprite雪碧图。
2.2 什么样的图片适合拼成雪碧图
-
静态图片,不随用户信息的变化而变化
-
小图片,图片容量比较小(一些大图不建议拼成雪碧图)
-
加载量比较大
3 iconfont阿里巴巴矢量图
除了iconfont阿里巴巴矢量图,还有其他的小图标Font Awesome 地址:iconfont-阿里巴巴矢量图标库 注册微博,git或者淘宝账号登陆
1.搜索要下载的图标(如:小米购物车)
将当前图标加入购物车
2.点击购物车下载对应的图片或者代码
图片可以直接使用,但是咱们使用的是代码
3.下载好的目录
下载好的代码中有三种引入方式:class类,symbol引入,unicode引用方式
class类: a. 兼容性良好,支持ie8+,及所有现代浏览器。 b. 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。 c. 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。 d. 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
symbol引入: a. 支持多色图标了,不再受单色限制。 b. 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。 c. 兼容性较差,支持 ie9+,及现代浏览器。 d. 浏览器渲染svg的性能一般,还不如png。
unicode引用: a. 兼容性最好,支持ie6+,及所有现代浏览器。 b. 支持按字体的方式去动态调整图标大小,颜色等等。 c. 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色
各有各的优势,咱们使用的是class类的引入方式 css引入
<link rel="stylesheet" href="./iconfont.css">
html引入
<span class="iconfont icon-xxx"></span>