css那些事儿4 背景图像

background:背景颜色，图像，平铺方式，大小，位置

能够显示背景区域即为盒子模型的填充和内容部分，其中背景图像将会覆盖背景颜色。常见的水平或垂直渐变颜色背景通常使用水平或垂直渐变的背景图像在水平或垂直方向平铺，在相邻元素在设置背景进行过度

大分小：在css中的图像，如果一张图像太大会造成网络请求下载时间增加，这时候需要考虑将图像进行拆分，即大分小

小拼大：有一些小图标形式的图像被零碎的使用到页面中，这些小图像很小，单个网络请求很快，但是数量达到一定的时候会增加网络请求次数，不利于页面响应速度，因此使用拼图技术

将多张小图像按照一定的规律和间距进行整合为一张图像，这时候小图标应用改图像为背景，各自设置各自背景大小和位置即可，这样既减小了网络请求，又使得后期图像得到统一的维护。

1 背景色与圆角边框

在css2.0时代由于css本身的边框并不支持圆角样式，所以使用背景颜色来模拟实现。由于单个元素的背景图像只有一个，因此需要上下两个元素进行配合，其实现方式主要有

1.1 固定大小

将背景图像进行水平或垂直拆分，然后在容器下边左下角进行背景填充，而左上角使用上边元素背景图像填充，这种方式只适合固定大小，且边框颜色修改得准备多套图像，因此有很多缺点

1.2 水平或垂直拉升

由于固定大小的局限性，因此将图像进行水平或垂直三分拆分，比如在垂直方向则在中间部分进行垂直平铺并重复，这样可以解决在水平或垂直方向拉升，但不能既水平和垂直方向拉升

1.3 水平和垂直拉升

在1.2 的基础上在背景图像右上角进行水平和垂直拆分为四份，并按照这样的方式设置背景，可以做到水平和垂直方向同时拉升，但是任然具有修改颜色的局限性

1.4 山顶脚图片

山顶脚图片其实就是一个三角形图像，将他使用蒙版的形式填充背景，这时候图像本身一部分是透明的，因此背景色也就起到了显示作用

1.5 css3

css3.0的出现让css本身支持圆角边框，且元素可以具有多个背景图像，如{-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em};

由于在css3的支持上还存在一些浏览器内核差异性，因此还是需要使用兼容性的 -webkit -moz分别代表了谷歌和火狐的内核

2 边框图像

css3支持边框图像，其具体使用方式为九宫格方式

3 特殊字体

由于浏览器能够支持的字体有限，而特殊字体的使用也并非广泛使用，因此制作一张背景图片来显示特殊字体的文本，而真实的文本则隐藏，形如

<div>

　　<span>防护问哦废话</span>

</div>

div span{display:none;} span{background-image:url("dsdsa.png"),none left top;}

4 投影

4.1 背景图方式实现投影

不外乎就是准备一张投影图像，使用相对定位或者负边距方式让图像在原有位置上偏移，这样的话也比较麻烦，需要制作相应的投影图像，也增加了图像资源请求，很不好

4.2 css3.0支持投影

box-show：垂直水平偏移投影的模糊程度，投影颜色与边框使用方式类似也需要浏览器内核多支持

5 透明度

在ie时代使用滤镜方式:filter() 或者使用rgba方式增加颜色透明通道，css3 中直接使用alpha即可

转载于:https://www.cnblogs.com/rjjs/p/6504505.html