23

我有一个图像元素，我使用 CSS 添加了不同的背景图像。

img {
  background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
}
<img src="http://i.stack.imgur.com/smHPA.png" />

我想在图像元素中显示 CSS 指定的背景图像（堆栈交换徽标src），而不是属性指定的图像（堆栈溢出徽标）。

这可能吗？我遇到无法更改 HTML 或使用 JavaScript 的情况，正在寻找替代方案。

4

8 回答 8

30

我找到了一个适用于所有主要浏览器（在 IE8+ 中测试）的解决方案，尝试蛮力。

img {
  background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
  position: relative;
  overflow: hidden;
  width: 32px;
  height: 36px;
  padding: 32px 36px 0 0;
  box-sizing: border-box;
}
<img src="http://i.stack.imgur.com/smHPA.png"/>

它有一些技巧。您必须将图像的实际宽度和高度作为宽度和高度。然后将填充左侧和顶部分别设置为该宽度和高度。我不知道溢出是否相关，但只是添加了它。box-sizing 必须是border-box。

编辑：解决方案更小。一个padding-leftorpadding-top就足够了，不需要overflow:hidden. 摆弄它。

于 2016-05-11T07:47:03.407 回答
29

Chrome 和 Firefox 都支持的object-positionCSS 属性为这个问题提供了一个相当直接的解决方案。该属性用于偏移原生图像在其元素内的渲染位置。该规范有用地指出......

被替换元素未覆盖的框区域将显示元素的背景。

...所以只要我们提供一个偏移量来确保原生图像完全超出边界，那么背景就会变得可见。例如：

img {
  object-position: -99999px 99999px;
  background-image: url('http://i.stack.imgur.com/5eiS4.png');
}
<img src="http://i.stack.imgur.com/smHPA.png" />

于 2016-05-09T20:21:25.330 回答
8

这在每个浏览器中都不可能，但在 WebKit 和 Blink 浏览器（例如 Safari 和 Chrome）中，可以通过使用content属性替换元素的src-specified 图像内容来实现<img>。使用content: none完全删除似乎不起作用，但我们可以将其替换为透明的 GIF 以达到相同的效果。

这将更改图像的固有尺寸（在本例中为 1x1），因此您还需要显式添加一个width，height如果它们尚未指定。

img {
  content: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
  width: 32px;
  height: 36px;
  background-image: url('http://i.stack.imgur.com/5eiS4.png');
}
<img src="http://i.stack.imgur.com/smHPA.png" />

于 2013-08-28T07:35:53.263 回答
1

这应该工作

你的图在这里

<img src="http://i.stack.imgur.com/smHPA.png" />

假设它的高度是 100px，宽度是 200px

那么你的 CSS 样式表应该是这样的

img{
    display: block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width:200px;
    height:100px;
    padding-left:200px;
    background:url('http://i.stack.imgur.com/5eiS4.png') no-repeat;
   }

基本上你要做的就是先插入border-box属性，然后提供等于图像宽度的左填充

于 2016-05-13T05:55:46.993 回答
0

您可以替换图像并向图像添加类以为其提供背景。 

img {
    position:relative;
    left:-99999px;
}
.background{
    width : 300px;
    height : 300px;
    background-image: url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
    position: relative;
    overflow: hidden;
    left:0;
}
于 2019-10-04T10:41:19.947 回答
0

确保“内容”img 的大小与img您要覆盖的大小相同。这比使用背景图像覆盖前景图像更好。

div.image:before {
  position:absolute;
   content:url(http://placehold.it/350x150);
}

归功于几年前的这篇文章https://stackoverflow.com/a/10833692/3247527

于 2016-05-14T00:07:54.967 回答
-1

不要使用图像。将div's 与背景图像一起使用

<img>是一个 HTML 标签。CSS 是为它添加样式，而不是更改它的属性。下面提到的是一种解决方法。我不会推荐它。不是一个非常干净的方法。

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            .style2{background:url('bg.jpg') 0 0 repeat !important;}
        </style>
    </head>
    <body>
        <div style="background:url(img.png) 0 0; width:728px; height:90px;" class="style2" />
    </body>
</html>
于 2013-08-28T07:29:40.800 回答
-1

您不能更改 HTML，但可以替换图像！打开 Photoshop 并制作一个 100% 透明的图像，与源文件同名，并将其放在当前图像所在的同一目录中。

这里会发生什么？图像标签将占据空间，因为透明图像和背景图像的大小将可见:)

于 2016-05-14T14:07:09.340 回答