Question

我的网站有一个带有src属性的图片，我想用自己的图像更改该图像的src位置。图像存在于div组件中。我无法更改HTML，我正在寻找使用CSS更改它的方法。

Div组件：

<div class="application-title">
<img style="margin-top: 3px;height: 45px;" src="image.svgz">
</div>

图像组件（CSS文件）：

.application-title IMG
{
    float: left;
    margin-top: 5px;
    margin-right: 10px;
    opacity: 1;
    margin-left: 0px;
    visibility: hidden;
}

Answer 1

您可以使用背景图片

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

Answer 2

这是另一个肮脏的黑客:)

.application-title > img {
display: none;
}

.application-title::before {
content: url(path/example.jpg);
}

Answer 3

你可以做到这一点，但它很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;
}

这是一个有效的例子：

http://jsfiddle.net/5tbxkzzc/

Answer 4

您可以使用：content:url("image.jpg")

<style>
.your-class-name{
    content: url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="your-class-name" src="..."/>

Answer 5

您可以删除图片

.application-title IMG {
    display:none;
}

将您自己的容器添加到容器中

.application-title {
    background-image: url("pathtoyourimage/header.png");
    height: 200px; //set it to your image height.
}

使用CSS替换图像src位置

5 个答案: