通过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. SQL Server链接数据库

    有时候我们希望在一个sqlserver下访问另一个sqlserver数据库上的数据,或者访问其他oracle数据库上的数据,要想完成这些操作,我们首要的是创建数据库链接. 数据库链接能够让本地的一个s ...

  2. 四、用CSS制作图形以及简单动画

    一.利用阴影画一个月亮 说明:画月亮,需要先画一个圆,然后利用box-shadow属性,生成阴影,再将圆的颜色变为透明即可. <html> <head></head> ...

  3. 简单的继承练习——疑问:私有属性在类的方法内调用时,有必要使用get,set方法嘛?

    要求: 创建一个Circle类,设置半径属性和返回面积的方法,在无参构造器中初始化半径值为1. 创建一个Cylinder类,继承Circle类,设置属性高和返回体积的方法,在无参构造器中初始化长度为1 ...

  4. postman打开白屏

    1.打开高级系统设置:2.在"高级"选项卡中,单击"环境变量":3.添加一个新的系统变量:POSTMAN_DISABLE_GPU=true4.关闭Postman ...

  5. python基础学习——数据容器

    1.数据容器相当于C的数组 有list,tuple(元组),str,set(集合),dict五种数据容器 2.list(列表) 列表中可存在不同的数据类型,可嵌套 #反向索引 name_list = ...

  6. tensorflow2.0+TF-lite 各种报错

    generic_type: type "InterpreterWrapper" is already registered! 原因:tensorflow2.5.0rc0版本太高,降 ...

  7. Mybatis-plus常见报错

    1.提示数据库(表)不存在,如图: 原因:mybatis-plus默认查询的表名字为实体类的名字User,并转小写. 解决:添加注解@TableName设置表名

  8. 【python】yaml文件的读写

    [python]yaml文件的读写 冰冷的希望 2020-10-22 18:31:47 442 收藏 1分类专栏: python 文章标签: python yaml版权 python专栏收录该内容67 ...

  9. linux java 环境搭建

    java -version 是否安装 yum -y remove java-1.7.0-openjdk* yum -y install java-1.7.0-openjdk* vim /etc/pro ...

  10. Django视图中的请求与响应

    一 请求 一 限制http请求 视图中的request,实际上是django源码中的HTTPRequest的子类WSGIRequest类的实例对象,主要由django对客户端请求的http协议报文进行 ...