使用CSS替换图像src位置 | 使用CSS替换图像src位置

本文介绍了使用CSS替换图像src位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个网站有一个src属性的图像，我想改变该图像的src位置与我自己的图像。图像存在于div组件中。

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

解决方案

  .application-title img {width：200px; height：200px; box-sizing：border-box; padding-left：200px; / *图片的宽度* / 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 />原始图片：< br />< img src = http://lorempixel.com/200/200/city/1/>

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.

Div component:

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

Image component(CSS file):

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

解决方案

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

这篇关于使用CSS替换图像src位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！