通过img.src添加图片

添加一个img元素,设置content,会发现在IE、safari等浏览器内显示为空白。

一般我们使用img,是通过src来设置的,可以通过react的import图片添加。

<img className="headerMenuEntryImg" src={MenuEntryImg}/>

通过background-image以背景来添加图片

先添加一个img元素:

 <img className="headerMenuEntryImg" />

通过css添加背景:

  .headerMenuEntryImg {
height: 24px;
width: 24px;
background-image: url(../../images/更多.svg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}

效果:设置图片背景background-image,显示有白边

原因:因为没有给img设置content或者src,浏览器理解为没有图片

解决:设置background-imgage,标签不用img,可以用div等。

html/css 添加图片的更多相关文章

  1. CSS 背景图片 添加 重复和定位。

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  2. iText + Freemarker实现pdf的导出,支持中文、css以及图片,页眉页脚,页眉添加图片

    本文为了记录自己的实现过程,具体的实现步骤是参考博文 https://www.cnblogs.com/youzhibing/p/7692366.html 来实现的,只是在他的基础上添加了页眉页脚及页眉 ...

  3. css008 给网页添加图片

    css008 给网页添加图片 1.            css和<img>标签       1.<img>标签是html的添加图片的标签,一般为: <img src=” ...

  4. CSS3-给网页添加图片

    给网页添加图片: 1.background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上 ...

  5. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  6. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  7. mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效

    引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...

  8. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  9. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  10. 转: 用css把图片转为灰色图

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

随机推荐

  1. Blog作业03

    目录 前言 设计与分析 踩坑心得 改进建议 总结 前言 这三次作业的题目只有2道题,但是在题量减小的同时,这三次作业集的难度也相应的上去了,题目的质量很好,运用很广泛,也考验了很多的知识点.这三次的作 ...

  2. sql server 索引检测

    -- 声明表变量 DECLARE @userTable TABLE (table_name NVARCHAR(20)); -- 将源表中的数据插入到表变量中 INSERT INTO @userTabl ...

  3. appium自动化时,automatic server里面desired capabilities的json representation设置

    一点一点来,记号下: 大体格式如下: { "platformName": "Android", "platformVersion": &qu ...

  4. [picoCTF]Scavenger Hunt write up

    http://mercury.picoctf.net:5080/,这个网站周围隐藏着一些有趣的信息.你能找到它吗? 根据提示: 您应该有足够的提示来查找文件,不要运行暴力破解程序. 点击链接,进入页面 ...

  5. nios verify failed 问题解决。

    nios 调试时碰到上图所示问题.根据下载地址可以判断下载flash.sdram都成功,这里说明电路设计和焊接都没有问题. 但是在flash地址verify failed between adress ...

  6. Checkmk监控工具使用手册

    其实用法Checkmk官网文档很全面:https://docs.checkmk.com/latest/en/intro_setup.html 顺着beginner's guide章节看完基本就能上手, ...

  7. C++编码注意事项

    1. vector,string不能按位赋值(vector用push_back, string用重载"+"号)

  8. Android笔记--查询联系人

    查询联系人 先在raw_contacts表里面查到每个联系人的不同的id,然后再根据各个id去查询各个联系人的详细信息 然后利用id得到相应的uri的值: 之后,就直接根据uri查询各个联系人的详细信 ...

  9. 对于实现上一篇遇到的问题——MyBatis+增删改查(已解决)

    问题一:该Http不支持Get/Post方法 我根据网上的解决方法将Get和Post的位置来回换,还是不停报错: 后来偶然间看到一个博主发的"你的代码写在Get或者Post里面,就将没写代码 ...

  10. Javaweb知识复习--MyBatis+Mapper代理开发

    一种持久层框架,主要用于简化JDBC MyBatis应用步骤 1.在数据库里面创建一个表 2.创建模块,导入坐标 就是新建一个Maven项目,在pom.xml里面导入mybatis相应导包依赖代码: ...