0

我非常需要以这种方式在一个小按钮图标下设置一个大背景：

<img 
src="little-icon.png"
style="background: url('main-image.jpg') no-repeat center; 
margin: auto; padding: 0; 
height: 240px; width: 180px;" 
/>

其中高度和宽度是（大）主背景图像的参数。简而言之：我需要将 img.src 设置为可点击图标，并将其背景图像设置为大图像。这对于包装 img 的 div 标签来说非常简单。但由于其他情况，我必须在同一个 img 标签中完成所有操作。

上面的代码完成了它的工作，但是图标被变形为背景的大小。有机会做我需要做的事吗？

4

3 回答 3

0

不，您无法在一个 img 标签内执行此操作，因为背景和图像本身被分配了相同的高度和宽度，因此它们将始终相互重叠并被拉伸或收缩到您指定的尺寸。您可以做的是将图像合并为一个，这可能是您唯一的机会，以防您真的被单标签政策所困扰。

于 2012-07-31T11:01:27.830 回答
0

当然，当您将高度和宽度样式应用于 img 标签时，它将应用于主图像，即 src 中的图像。您只能控制该区域内的背景位置。

根据问题，如果您想要下面的大背景，小图标，您需要创建具有透明背景的图标的大图像。

于 2012-07-31T11:05:54.040 回答
0

我认为有更好的方法可以做到这一点，但如果你绝对必须按照自己的方式去做，请使用填充 - 使用 CSS 设置图像的宽度和高度，肯定会使它变形......

此处的示例（使用 :hover 作为解释方式）

于 2012-07-31T11:13:06.070 回答