Css 将src图像隐藏在<；img>；元素，但显示其背景图像_Css

Css 将src图像隐藏在<；img>；元素，但显示其背景图像

css

Css 将src图像隐藏在<；img>；元素，但显示其背景图像,css,Css,我有一个image元素，我使用CSS向其中添加了一个不同的背景图像 img{ 背景图像：url（'http://i.stack.imgur.com/5eiS4.png")重要,； } 不要使用图像。在背景图像中使用div 是一个HTML标记。CSS是为了给它添加样式，而不是改变它的属性。下面提到的是一个解决方法。不过我不推荐。这不是一个非常干净的方法示例代码： <!DOCTYPE HTML> <html> <head> <me

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

img{
背景图像：url（'http://i.stack.imgur.com/5eiS4.png")重要,；
}

不要使用图像。在背景图像中使用

div

是一个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>


无标题文件
.style2{background:url（'bg.jpg'）0 0重复！重要；}

这不可能在每个浏览器中都实现，但在WebKit和Blink浏览器（如Safari和Chrome）中，可以通过使用

内容属性来替换
中指定的图像内容来实现，Chrome和Firefox都支持该内容，为这个问题提供了一个相当直接的解决方案。此属性用于偏移本机图像在其元素中的渲染位置。规范很有帮助地指出
未被替换元素覆盖的框区域将显示元素的背景
…因此，只要我们提供一个偏移量，以确保本机图像将完全超出边界，背景将变为可见。例如：

img{
对象位置：-9999px 9999px；
背景图像：url（'http://i.stack.imgur.com/5eiS4.png');
}
我找到了一个解决方案，可以在所有主流浏览器（IE8+中测试）中使用蛮力

img{
背景图像：url（'http://i.stack.imgur.com/5eiS4.png")重要,；
位置：相对位置；
溢出：隐藏；
宽度：32px；
高度：36px；
填充：32px 36px 0；
框大小：边框框；
}
这应该能用
你的形象在这里
<img src="http://i.stack.imgur.com/smHPA.png" />

基本上，您需要做的就是先插入边框框属性，然后提供与图像宽度相等的左填充
确保“内容”img与您要掩盖的img大小相同。这比使用背景图像覆盖前景图像效果更好
div.image:before {
  position:absolute;
   content:url(http://placehold.it/350x150);
}

几年前写过这篇文章，你不能更改HTML，但可以替换图片！
打开Photoshop，制作一个100%透明的图像，与源图像同名，并将其放在当前图像所在的目录中
这里会发生什么？图像标签将占据空间，因为透明图像和背景图像的大小将可见：）您可以置换图像并向图像添加类以提供背景。

请注意，4个前导空格将文本格式化为代码。删除它们以使文本显示为文本，而不是格式化为HTML源代码。Opera（前缀从v11.6到v19）也支持它们，IE或Safari不支持它们。我建议直接在img
标记中指定height
和width
属性。这需要再次添加overflow:hidden
。此外，如果用于背景的图像小于实际图像，设置背景位置
和背景重复
属性可能是个好主意。@lrtad我记得在某个地方读到，内容
属性仅对CSS3规范中的：before
和：after伪元素有效。
div.image:before {
  position:absolute;
   content:url(http://placehold.it/350x150);
}

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