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

1810

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

网络收藏夹的正确打开方式是怎样的？
有人会说：这算哪门子问题，网络收藏夹不就是一个普通网站吗？普通网站怎么打开，你网络收藏夹就怎么打开呗！嗯...这么说当然没错，但是，但是！网络收藏夹毕竟是一...
使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题
当使用基于Cookie-Free域名加载CSS时，字体文件无法加载的问题通常是因为浏览器政策所导致的。这个问题与字体文件资源和浏览器的同源策略有关。在Web...
使用Goodsync同步工具遭遇无法解决冲突的状况一例
Goodsync是一个非常好用的同步工具，适用于需要经常同步文件的人，比如程序员，或者业余开发者等等。尤其是其“自动同步”功能，可以说大大地提高了生产率，比以前...
Ubuntu 22.04 live server更换亚马逊AWS的更新源
amzon亚马逊云AWS的更新源，即使在国内速度也基本可接受，其最大特点是软件丰富，常用软件包几乎没有找不到的。具体步骤如下：
对比一下几个中文网络收藏夹的实用性之手机适配篇
手机满天下的时代，一个网站还好不好用，能否在手机上得到良好浏览体验非常关键了。最近几天自己重点关注了一下自己的favinavi网站页面的屏幕自适应效果，优化...
自用小工具：正则表达式测试是否能匹配字符串
正则表达式写起来不难，但是要做到准确无误却是一个不小的挑战，经常因为一个小疏忽，导致貌似正常而实际上却有bug。尤其是域名或url相关的，特别容易出错，出错...