在线笔记 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>

1808

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

关于网页上的复选框checkbox的checked和value的问题
这个问题相信很多像我一样的非专业开发者遇到过，就是感觉checkbox是一个神奇的存在，为什么这么说？就是在开发网页过程中，有时候使用checkbox一切顺利，...
MDUI前端框架，表格头position: sticky无效的问题
MDUI前端框架不错，很漂亮、灵活，用起来能省不少时间。但是有些时候，它也会引入一些意想不到的问题：比如我想做一个统计表格，统计一大堆数据，然后希望页面滚动...
如何获得高质量网站的外部链接
问了一下chatGPT这个问题，以下是它的回答，供大家参考：获得高质量网站的外部链接是一个需要耐心和投入的过程，以下是几种获得高质量外部链接的方法： 1、...
使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题
当使用基于Cookie-Free域名加载CSS时，字体文件无法加载的问题通常是因为浏览器政策所导致的。这个问题与字体文件资源和浏览器的同源策略有关。在Web...
无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS?
累计布局偏移: Cumulative Layout Shift, 简称CLS，是一项web性能的重要指标，旨在避免页面渲染时，某些元素（比如图片、字体等）加载前...
自用小工具：正则表达式测试是否能匹配字符串
正则表达式写起来不难，但是要做到准确无误却是一个不小的挑战，经常因为一个小疏忽，导致貌似正常而实际上却有bug。尤其是域名或url相关的，特别容易出错，出错...