CSS 修改Img标签中的图片(src)

在开发的过程中遇到了一个比较特别的问题，需要使用 CSS修改Img中的图片。

content

那最先通过搜索找到的解决方案是使用 Content 样式

/*图片替换*/
img {content: url(../Img/Logo.png);
}

这个方案在Chrome中显示正常，但是IE不支持

background-image

那我又尝试使用background-image样式

/*图片替换*/
img {width: 155px;height: 53px;background-image: url(../Img/Logo.png);background-size: 100%;background-repeat: no-repeat;
}

注意设置background-image后删除src中的图片会导致img标签没有长宽，所以需要根据背景图片设置长宽，如果图片和Img长宽不一致,根据需求还可设置拉伸和平铺的样式

不出意外，被前景挡住了。

我们把Img标签中的 src、alt属性删除，此时IE显示正常，但Chrome会显示一个带边框的破图。

那我们把前景图片设置为透明图片如何？经测试表现效果良好！

所以当前的解决方案是 Img标签上设置一个透明的图片，然后用 background-image样式替换背景图片，实现上述需求

小技巧：

没有PS如何制作透明图片

可以使用PowerPoint，插入一个一个正方形的图案，将背景和边框都设置为透明，右键图案->另存为图片就可以了

CSS 修改Img标签中的图片(src)相关推荐

[css] 怎么让div中的图片和文字同时上下居中？
[css] 怎么让div中的图片和文字同时上下居中? <div><img src="./"/><label>文字内容</label> ...
css里面li标签怎么加图片_分享三种给li标签添加图标的方法
我们在页面布局时,经常会用到li标签,单独使用li标签比较单调,有时候为了页面效果,需要加入图片,那怎么在li标签中添加图片呢?这篇文章就和大家分享三种给li标签添加图标的方法,希望对你有用. 1.使 ...
js修改div标签中的内容
<div id='divId'>初始文字</div><script>$(document).ready(function(e){$('#divId').html(' ...
html script src属性,动态修改script标签中的src属性存在的问题
今天某个同事遇到一个诡异的问题,问题描述如下: 需求:通过脚本动态修改script标签的src来载入一段外部脚本并执行实现方式(#1): document.getElementById('exter ...
使用css修改input框中checkbox的样式
概述在页面设计时,我们经常使用input复选框.由于界面设计的需要,我们需要修改复选框的样式,使得界面更美观或者适应新的需求.由于CheckBox伪类修改比较复杂,通常修改的方式有两种,一个是链入图 ...
tkinter标签中添加图片
LabelImage 图像PhotoImage 添加jpg文件文字与图像共存图像PhotoImage 语法如下 imageobj = PhotoImage(file="xxx.gif&q ...
JS 修改a标签中的链接及文字
DOM:Document Object Model --->文档对象模型----操作页面的元素 html文件看成是一个文档,那么这个文档看成是一个对象,文档中的所有的标签都可以看成是一个对象页 ...
使用PyPDF4和PIL修改PDF文件中的图片
继上篇从PDF中提取图片数据之后,我们看如何使用PIL修改图片并写入到PDF文件. 先放两个相关链接: 使用PyPDF4提取pdf文件中的图片 PIL从内存中加载图片先放代码: import PyP ...
修改select 标签中的值
背景: 前台下拉列表中的值需要与input标签中输入的值相等思路: 1.下拉列表为空时,input标签有值的情况下复制给select标签 2.后台只需要一直读取select标签的值即可,不需要再重复 ...

CSS 修改Img标签中的图片(src)

content

background-image

小技巧：

CSS 修改Img标签中的图片(src)相关推荐

最新文章

热门文章