背景图片剪裁之background-size

来源:互联网 发布:下载打印机软件 编辑:程序博客网 时间:2021/09/25 17:14

将网站的背景和到一张大图片上,相比于每一个部分用一张小图片做背景,可以减少请求的次数,提高访问的速度。

基本方法:

给元素设置

 div{background:url(image.png);background-size:80px 60px;background-position:80px 100px;}
三行分别要表达的意思就是:

1.设置背景图片的地址

2.显示出多大的部分。

3.从这张大背景的哪个位置开始显示。


对于移动端有一个问题就是屏幕大小不同需要自动变化大小,一般需要用百分比而不是像素来定义。


例如是一张大的背景图片,用它来替代原来8张小图的设计。对于每一块都有:

.subClassItem {float: left;width: 25%;/*height:auto!important;       height:100px;       min-height:100px;     *//*border: 1px solid black;*/background: url(/static/images/course/77.png);background-size: 400% 200%;}.blank{padding: 39% 0;width: 100%;}#box1 {background-position: 0% 0%;}#box2 {background-position: 33.333333% 0%;}#box3 {background-position: 66.66666% 0%;}

值得注意的是,横向有4部分,但background-positionX并不是25 50 75 100 ,而是33,66,100.这是因为用百分比时,含义是背景图的百分比的位置和元素百分比的位置重叠。


background-size 设置成400%,200%的原因是为了让背景正好是小块的8倍,也即一个小块显示的也是背景图中的一个小块。从而实现了宽的自适应。


那么高度的自适应如何做到呢?由于这种小块一般内容为空,所以没有高度,强行设置一个像素高度也没法随宽度变化,造成比例失真,办法就是在块内添加一个blank元素,利用padding-top/padding-bottom的百分比基数取决于父元素宽度,实现横向对纵向的影响。


0 0
原创粉丝点击