Online notes favinavi - online bookmark

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

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，空白部分是留着扩展用。

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

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

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

CSSCopy 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;
}

htmlCopy 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>

1823

favinavi - for heavy web user Online notes

网络收藏夹的正确打开方式是怎样的？
有人会说：这算哪门子问题，网络收藏夹不就是一个普通网站吗？普通网站怎么打开，你网络收藏夹就怎么打开呗！嗯...这么说当然没错，但是，但是！网络收藏夹毕竟是一...
使用CSS让大背景图片适应不同大小屏幕又一例
这个示例网页使用了一个较大的背景图片，并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于...
无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS?
累计布局偏移: Cumulative Layout Shift, 简称CLS，是一项web性能的重要指标，旨在避免页面渲染时，某些元素（比如图片、字体等）加载前...
纯CSS3做一个带箭头指向的漂亮的带阴影提示框
纯CSS3，不使用图片。先看下最终实现的效果图： [img] 这里以指向右侧的尖形小箭头为例，其它方向请自行修改。
win11安装跳过TPM2.0和安全启动检查的方法
为了在一些相对老旧的机器上安装windows 11，我们需要跳过win11安装程序中的TPM2.0检查，方法如下：进入安装界面后，按Shift+F10打开命...
最好用的网络收藏夹应该是什么样？
最好用的网络收藏夹应该是什么样？我们这里先明确一下讨论的前提，参考：什么是网络收藏夹/网络书签。这个问题恐怕每个人的答案都不尽相同。但是以favinavi的...