Question

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

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

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

我想在图片元素中显示CSS指定的背景图片（the Stack Exchange logo），而不是src属性（the Stack Overflow logo）指定的图片。

这可能吗？我有一种情况，我无法改变HTML或使用JavaScript，我正在寻找替代方案。

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

它有一些技巧。您必须将图像的实际宽度和高度指定为宽度和高度。然后分别将填充左侧和顶部设置为该宽度和高度。我不知道溢出是否相关，只是添加了它。盒子大小必须是边框。

编辑：解决方案更小。 padding-left或padding-top中的一个就足够了，不需要overflow:hidden。 Fiddle用它。

Answer 2

Chrome和Firefox都支持

The object-position CSS property，可以直接解决此问题。此属性用于在其元素内偏移本机图像的呈现位置。该规范有助于注意......

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

这将更改图像的内在尺寸（在这种情况下为1x1），因此如果尚未指定，则还需要显式添加width和height。 / p>

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" />

Answer 4

这应该有用

你的形象就在这里

<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 属性，然后提供等于图像宽度的左边距

Answer 5

确保＆＃34;内容＆＃34; img与您隐藏的img大小相同。这比使用背景图像覆盖前景图像效果更好。

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

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

Answer 6

您可以替换图像，并在图像中添加类以使其具有背景。

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;
}

Answer 7

不要使用图像。将div用于背景图片

<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>

Answer 8

您无法更改HTML，但您可以替换图片！打开Photoshop并制作与源名称相同的100％透明图像，并将其放在当前图像所在的同一目录中。

这里会发生什么？当透明图像和背景图像的大小可见时，图像标记将占据空间：）

在<img/>元素中隐藏src图像，但显示其背景图像

8 个答案: