Html 使用 CSS 替换图像 src 位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28832129/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace image src location using CSS
提问by Neophile
I have a website that has an image with a src attribute and I would like to change the src location of that image with an image of my own. The image lives in a div component. I can't change the HTML and am looking ways to change it using CSS only please.
我有一个带有 src 属性的图像的网站，我想用我自己的图像更改该图像的 src 位置。图像位于 div 组件中。我无法更改 HTML，我正在寻找仅使用 CSS 更改它的方法。
Div component:
div 组件：
<div class="application-title">
<img style="margin-top: 3px;height: 45px;" src="image.svgz">
</div>
Image component(CSS file):
图像组件（CSS 文件）：
.application-title IMG
{
float: left;
margin-top: 5px;
margin-right: 10px;
opacity: 1;
margin-left: 0px;
visibility: hidden;
}
回答by Pete
You can use a background image
您可以使用背景图片
.application-title img {
width:200px;
height:200px;
box-sizing:border-box;
padding-left: 200px;
/*width of the image*/
background: url(http://lorempixel.com/200/200/city/2) left top no-repeat;
}<div class="application-title">
<img src="http://lorempixel.com/200/200/city/1/">
</div><br />
Original Image: <br />
<img src="http://lorempixel.com/200/200/city/1/">回答by matcygan
Here is another dirty hack :)
这是另一个肮脏的黑客:)
.application-title > img {
display: none;
}
.application-title::before {
content: url(path/example.jpg);
}
回答by lharby
You could do this but it is hacky
你可以这样做，但它是hacky
.application-title {
background:url("/path/to/image.png");
/* set these dims according to your image size */
width:500px;
height:500px;
}
.application-title img {
display:none;
}
Here is a working example:
这是一个工作示例：
