> 웹 프론트엔드 > HTML 튜토리얼 > Css Sprite 图片等比缩放图片大小(background-size优化Sprites图显示)_html/css_WEB-ITnose

Css Sprite 图片等比缩放图片大小(background-size优化Sprites图显示)_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-21 08:58:55
원래의
1677명이 탐색했습니다.

在一个项目的开发过程中用到了css Sprite,有这样一个需求:目标样式大小是32px * 23px大小的图片作为图标。 如图所示:

但是,给我的背景图片是这样的一张图,256px * 46px:

在我们的实例中,我们使用底部菜单大小32px * 23px.为了保证普通显屏设备的图像显示,在这个图像的基础上做了一半的缩小。

在最初的CSS样式中,background-position的属性值都不需要进行任何设置,因为他们的默认值都是“0”,如下所示:

.x-navbar [class^='x-icon-'] {background-image: url(img/icon_navbar_new_year.png);width: 32px;height: 23px;} 
로그인 후 복사

因此,最关键的问题是,我们怎么知道background-size属性值要设置为多少?

这里有一个公式:
高分辨率图像宽度 / 目标图像宽度 = X
原始Sprites图像宽度 / x = background-size的宽度值

我们高分辨率下的图标是256px x 46px;
我们目标图像的宽度是“64px”;
我们Sprites图像的总宽度是“256px”

根据前面的公式 可以得知
64/32 = 2
256/2 = 128
最后的一件事情。我们只计算了背景图像的宽度值,为了确保背景图像缩放比例正常,我们将“height”值设置为“auto”。当然你也可以设置相的的值(设置background-sizer的宽度为auto,高度为具体值),但我发现设置宽度会比较容易。

.x-navbar [class^='x-icon-'] {    background-size: 128px auto;}
로그인 후 복사

然后就是根据图片的位置坐标进行显示了:

.x-icon-shouye {background-position: 0 0;}.x-icon-dingdan {background-position: -32px 0;}.x-icon-gouwuche {background-position: -64px 0;}.x-icon-gengduo {background-position: -96px 0;}
로그인 후 복사

这样就实现了图中的效果了!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿