在线笔记 favinavi - 人性化网络收藏夹

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

分类标签：全部 CSS html javascript php/other IT

by: fanshome 2023-07-26 09:35(UTC)

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

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

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

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

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

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

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

CSS复制代码

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

html复制代码

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

835

favinavi - 重度网络用户必备在线笔记

A PHP method for determining whether a browser supports AVIF images
The latest generation of image compression format AVIF is very good, the effect ...
CSS实现在普通可滚动容器元素内的类似position:fixed悬浮固定按钮效果
有时候，我们需要在某个可滚动（scroll）的元素内实现悬浮固定按钮效果，按钮不能随着鼠标滚动而变化。在全可视窗口实现这个效果（比如顶部的悬浮菜单）比较简单，只...
网页图片CSS进阶篇——优化图片，提升网页加载速度
说到提升网页中图片加载速度，一般立即想到的是给图片瘦身，比如减小图片尺寸，或者通过工具降低图片文件大小，比如png图片，可以利用在线压缩PNG图片网页工具，一般...
简洁有效地实现水平垂直双居中
同时实现水平和垂直方向双居中的方法网上有很多种，本人倾向于采用其中最简洁有效的方法来实现，具有比较好的通用性。具体实现的css代码如下：
Apache2网站安装开通https协议SSL证书
比较简单实用的一种做法是使用certbot，签发证书、安装、配置web服务器（apache/nginx等）、自动更新一条龙。详细介绍请访问cerbot官网：ht...
我的酱香之路（一）
男人喜欢喝点酒，是一件很正常的事。我其实并不太懂酒，也不算是酒鬼，平时在自己家里基本不喝酒。现在，假如可以选择，那么我只喝酱香酒。咱们中国人，一般来说，年轻时...