default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

CSS背景图片分割之大图小用

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-07-26 09:35(UTC)

Demo

为了提高页面加载速度,我们往往需要把一些小图标合并成一个图片文件,然后采用图片分割的方法来呈现,这很容易实现,使用background-position来设定图片的起始位置即可。

到了当今手机时代,随着屏幕尺寸的千变万化,图片分割又会遇到一个新问题:就是图片分辨率的问题,一般图标文件的实际大小为:16x16, 24x24, 32x32, 48x48。按原始大小呈现,有时候图片就会显得模糊,不清晰。这时,假如我们使用“大图小用”的方法,就会取得比较好的效果。比如一个图标,想呈现的大小为24x24,我们可以实际使用一张64x64或者128x128的图片,然后设定{width:24px;height:24px;},这样来强迫浏览器显示成24x24的图片,从而使得图片显示得更为清晰,效果更佳。

单张图片好办,但是假如我们想继续沿用图片分割的方法来实现呢?下面就给大家展示一个实际的例子:

原图:1280x128,每个图标都是128x128,空白部分是留着扩展用。

icons-1280x128

如果我们要显示为24x24的单个图标,可以参考以下css代码:

background-size之所以是1000%,是因为单个图片宽度是整个图片宽度的10%,因此反过来,背景图片的宽度就应该是10倍关系。

点击页面红色“演示”按钮查看效果。

CSScontent_copyCopy codes
.bot1,.bot2,.bot3,.bot4,.bot5,.bot6,.bot7,.bot8
{
	width: 24px;
	height: 24px;
	background: url(/g/bots128.png) no-repeat;
	margin: 20px;
	display:inline-block;
}

.bot1{background-position:0 0;}
.bot2{background-position:-24px 0;}
.bot3{background-position:-48px 0;}
.bot4{background-position:-72px 0;}
.bot5{background-position:-96px 0;}
.bot6{background-position:-120px 0;}
.bot7{background-position:-144px 0;}
.bot8{background-position:-216px 0;}

.bot1,.bot2,.bot3,.bot4,.bot5,.bot6,.bot7,.bot8
{
	background-size:1000%;
}

body{
	text-align:center;
}

.original-pic
{
	background: #fcc;
	width: 1280px;
	height: 128px;
	margin: 0 auto;
}
htmlcontent_copyCopy codes
<h2>原图:1280x128</h2>
	<div class='original-pic'><img src='/g/bots128.png' alt='original-pic'/></div>

<br/>
<h2>单个图标:24x24</h2>
<span class='bot7'></span>
<span class='bot2'></span>
<span class='bot6'></span>
<span class='bot5'></span>
<span class='bot4'></span>
<span class='bot3'></span>
<span class='bot1'></span>
<span class='bot8'></span>

visibility 778


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel