背景属性及雪碧图技术
background
常见背景属性:
属性 | 描述 |
---|---|
background-color | 规定要使用的背景颜色 |
background-image | 规定要是用的背景图像 |
background-size | 规定背景图像的尺寸 |
background-repeat | 规定如何重复背景图像 |
background-attachment | 规定背景图像是否固定或者随着页面的其他部分滚动 |
background-position | 规定背景图像的位置 |
inherit | 规定从父元素继承background属性的设置 |
background-image
background-image 属性为元素设置背景图像
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距
默认的,背景图像位于元素的左上角,并在水平和垂直方向上重复
background-repeat 设置元素平铺的方式
属性值:
值 | 描述 |
---|---|
repeat | 默认。背景图像将在水平和垂直方向上重复 |
repeat-x | 背景图像将在水平方向上重复 |
repeat-y | 背景图像将在垂直方向上重复 |
no-repeat | 背景图像将仅显示一次 |
inherit | 继承父元素background-repeat 属性值 |
background-position
background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像(由 background-image 定义)的位置
属性值:
background-attachment
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
属性值:
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而滚动 |
fixed | 当页面的其余部分滚动时,背景图像不会移动 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
雪碧图技术(精灵图技术)
CSS 雪碧即 CSS Sprite,也叫CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分
CSS 雪碧图应用原理就是截取大图一部分显示,而这部分就是一个小图标
使用雪碧图的好处:
- 利用CSS Sprite能很好的减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
- CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
- 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
- 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便
缺点:
- CSS雪碧的最大问题是内存使用
- 拼图维护比较麻烦
- 使CSS的编写变得困难
- CSS 雪碧调用的图片不能被打印
我们可以使用background综合属性制作通天banner,什么是通天banner呢,就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大,
那么我们可以此属性来制作通天banner。
background: red url('./images/banner.jpg') no-repeat center top;