Css sprite在div中，宽度为%？
CSS Sprite是一种将多个小图标合并到一张大图中的技术，通过设置背景图的位置和大小来显示所需的图标。在使用CSS Sprite时，可以通过设置div的宽度为百分比来控制显示的图标大小。
具体来说，如果将多个小图标合并到一张大图中，并设置div的背景图为该大图，然后通过设置div的宽度为百分比来控制显示的图标大小。例如，如果div的宽度设置为50%，则显示的图标大小为原图的一半大小。
CSS Sprite的优势在于减少了HTTP请求次数，提高了页面加载速度，同时也可以减少图标文件的大小，节省了带宽和存储空间。
CSS Sprite在前端开发中广泛应用于图标的显示，例如导航菜单、按钮等场景。通过将多个小图标合并为一张大图，可以减少HTTP请求，提高页面加载速度。
腾讯云相关产品中，可以使用对象存储（COS）来存储CSS Sprite所需的大图，通过CDN加速来提高图标的加载速度。具体产品介绍和链接如下：
- 腾讯云对象存储（COS）：提供高可靠、低成本的云端存储服务，支持存储和管理大规模的非结构化数据。了解更多信息，请访问：腾讯云对象存储（COS）
- 腾讯云内容分发网络（CDN）：通过全球分布的加速节点，提供快速、稳定的内容分发服务，加速静态资源的访问速度。了解更多信息，请访问：腾讯云内容分发网络（CDN）
相关·内容
2回答
有没有可能有一个Css雪碧图在div和width在%？现在我试着这样做，但不起作用： background-image: url("/images/sprite-img.png"); <img src="/images/transpar
浏览 29提问于2016-09-27得票数 0
2回答
/Images/index.png") 0px 0px;这是工作的基本代码，它以258*300像素的绝对尺寸显示来自sprite的适当图像。问题是，我也想把宽度设置为40%。/Images/index.png") 0px 0px;如果我要使用普通图像(即，不是精灵)，我只需将宽度设置为40%，并且图像缩放到包含的div。稍后我将讨论div类名的意义。trans显示透明映像，"spr
浏览 2提问于2013-07-04得票数 2
回答已采纳
我试图在css网格中放置一个图像(实际上是雪碧-工作表)。首先，我有一个sprite-sheet组件，它包含sprite-sheet和compo映像组件，它们应该模拟另一个持有这个sprite-sheet的组件。}sprite-sheet.component.html
<div</
浏览 3提问于2021-01-09得票数 2
回答已采纳
2回答
我有一个CSS问题，只发生在谷歌Chrome。设置为overflow: hidden的对象在以水平为中心的容器内时在边缘被“裁剪”，并且只在奇怪的浏览器宽度上，并且只在高分辨率的显示器上。HTML： <div id="container">
<div class="sprite"
浏览 3提问于2014-06-06得票数 2
回答已采纳
1回答
使用CSS，如何使按钮图像background: url();相对于父div缩小？父div是居中的，并根据视口宽度vw设置为缩放。background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites&#
浏览 0提问于2018-06-11得票数 0
回答已采纳
2回答
CSS悬停图像替换
、、、、
基本上，你有两个版本的图像保存到一个文件中，它们堆叠在一起，并使用CSS来调整悬停时的页边距。下面是一个成功运行的例子： <div id="work" class="sub"> <img id="show_fire" class="thumbnail <em
浏览 3提问于2011-04-11得票数 0
回答已采纳
4回答
CSS雪碧图像背景问题
、、、
我在我的网站使用精灵形象，我的图标是水平和垂直堆叠。问题是，当我尝试从sprite图像中使用一个特定的sprite图标时，我不能只使用相应的sprite图标(在下面的SS中以蓝色四舍五入)，相反，我得到了整个图像正在跨越我的div，如下面的屏幕所示。我只想使用特定的图标在左边的文字使用填充-左(我给了30 of )。我也试过使用背景尺寸，它不起作用。
请帮我这个忙。提前感谢您的帮助。:url("images/css-spri
浏览 4提问于2014-03-18得票数 0
回答已采纳
如何让我的css精灵后退按钮通过W3C验证？下面是我调用按钮的代码。<a href="#" onclick="history.go(-1)"><div class="icon-backbtn"></div></a>
浏览 0提问于2012-04-28得票数 0
回答已采纳
我定义了两种风格： display:block; height:22px; z-index:0; background-position:0px -22px;
img.fbimportant;
浏览 2提问于2013-11-07得票数 1
回答已采纳
1回答
我有问题，知道如何做正确的数学或公式，使一个响应式的css精灵。它是一个边界半径为50%的圆。因此，它的宽度和填充底部被设置为100%，以使圆成比例。.hero_sprite_container {}
width: 100%; border-radius10s steps(16) infinite; t
浏览 23提问于2019-10-26得票数 3
回答已采纳
我想要应用背景的div比我的sprite要大，而我想要用作背景的sprite的部分从sprite的顶部是100 to。如何将div的背景设置为我想要的sprite的一部分，并将其定位到div的右侧。我要把“我想要的”背景推到div的右边，其余的是红色。我的CSS： background: url('http://i.imgur.com&
浏览 2提问于2014-06-18得票数 1
回答已采纳
我需要重新创建一个动画gif，我自己的，在jQuery中，将通过图像序列和不断重复。所以我有这些图片<img src="2.png" /><img src="4.png" />
在页面开始时不需要加载任何操作
浏览 0提问于2011-05-16得票数 0
回答已采纳
我想使用CSS Sprite，但我以前没有大规模使用过它，似乎当所有的图像都使用CSS Sprite(图像作为背景)显示时，那么它必须在div或span中与display: block，以便它可以有一个宽度和高度它也许能够显示为inline-block，但我认为并不是所有的浏览器都很好地支持它？
浏览 0提问于2011-03-30得票数 2
回答已采纳
1回答
这是我用来通过css为对象设置动画的sprite。每一帧的宽度是224px，所以div的background-position属性每帧都递增-224px，循环继续。问题是我的div的宽度不固定。我使用div的百分比宽度来保持分辨率独立。所以我希望我的224px宽的框架在div的宽度上缩放，并在每一帧中向左移动相同的量。希望你明白这一点。下面是用于对div
浏览 2提问于2012-09-01得票数 2
回答已采纳
当我想改变一些选择下拉列表框的高度时，我遇到了这个问题。我希望它们更高，也更接近。我不知道这是否可能与制服，但这是我的代码不管怎样：{ height:60px;
这是一个选择(它们非常大)： <option>January</option> <option>March</
浏览 1提问于2012-08-21得票数 1
4回答
如何让我的sprite响应
、、、、
我们有一组蓝色的窗帘放在一个精灵上，我想让它在背景jpg的宽度变小时变得流畅。请注意，精灵内部的蓝色窗帘覆盖了jpg的蓝色窗帘。精灵需要覆盖顶部中心的两个蓝色窗帘，因为jpg是响应式的。因此，当更改尺寸时，精灵必须保持在正确的位置并做出响应。HTML<div id="sprite_contact" class="<em
浏览 0提问于2014-03-21得票数 2
/images/gadget-4-sprite.png') height:70px;}
上面是我有一个包含背景图像的div的CSS。我已经将div的高度和宽度设置为与图像的尺寸相同。我遇到的问题是，当窗口重新调整大小时，例如小于图像的宽度，它就会被切断。有没有一种解决方案，可以让我以这样一种方式对CSS进行样式设置，使<
浏览 1提问于2013-09-09得票数 2
2回答
sprite类将包含一些基本的css：background-image:url(...);width: 16px;}我尝试在span元素<
浏览 1提问于2010-09-27得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
