如何将精灵背景图像放入容器中？

问题描述 投票：0回答：1

我有一个精灵图像，它是两个图像的连续体。 但它们总是比容器大，我想将它们修复/放入父容器内。如何在不增加父级尺寸的情况下调整图像？

HTML：

<body>
<div><span class="affiliate-sprite-60"></span></div>
<div><span class="affiliate-sprite-40"></span></div>
</body>

CSS：

.affiliate-sprite-60
{
background:url('affiliate-sprite.jpg') 0px -1px;
width:799px;height:440px;
display:inline-block;
}

.affiliate-sprite-40
{
background:url('affiliate-sprite.jpg') -799px -0px;
width:783px;height:441px;
display:inline-block;
}
div {
width: 600px;
border: 2px solid red;
}

这是原图：

html css css-sprites
1个回答
0
投票

CSS 图像精灵不涉及调整图像大小。 事实上，CSS spriting 的好处之一是它可以帮助减少浏览器上的 CPU 负载，因为它避免了浏览器在渲染之前调整单个图像的大小。

您有两个选择：

  1. 使用图像编辑工具调整精灵内图像的大小

  2. 增加父容器的宽度。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.