通过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. postman打开白屏

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

  2. 2020.11.24 typeScript命名空间

    命名空间:定义了标识符的可见范围,一个标识符可以在多个命名空间中定义,它在不同命名空间的含义是互不相干的.在一个新的命名空间可以定义任何新的标识符,它不会与已有的任何标识符发生冲突. 使用: 这个时候 ...

  3. Vue父子组件传值.sync

    <template> <div class="content"> <btn :btnName.sync='num' ></btn> ...

  4. windows tips

    u启动经典dos工具实现硬盘分区教程 https://jingyan.baidu.com/article/a3f121e4dbe55afc9052bbfe.html?st=2&net_type ...

  5. Javaweb实践复习--MyBatis

    增删改查操作 查询 查询所有数据 1.编写接口方法:Mapper接口------参数:无------结果:List 2.编写sql语句:SQL映射文件 一般情况下,若是用户实体类里面的变量名称与数据库 ...

  6. 使用sync.Once实现高效的单例模式

    1. 简介 本文介绍使用sync.Once来实现单例模式,包括单例模式的定义,以及使用sync.Once实现单例模式的示例,同时也比较了其他单例模式的实现.最后以一个开源框架中使用sync.Once实 ...

  7. Java输入与输出语句详细解析

    前言 我们在前面的文章中,学习了如何创建Java文件,也学习了Java里的标识符.运算符.进制等内容.有些同学觉得还不够过瘾,给壹哥发来了好多私信,期待我能够把进度更新的再快一点.这不,新内容这就给大 ...

  8. 磁盘IO 基本常识

    计算机硬件性能在过去十年间的发展普遍遵循摩尔定律,通用计算机的 CPU主频早已超过3GHz,内存也进入了普及DDR4的时代.然而传统硬盘虽然在存储容量上增长迅速,但是在读写性能上并无明显提升,同时SS ...

  9. Linux无root权限conda初始化

    pre { overflow-y: auto; max-height: 400px } img { max-width: 500px; max-height: 300px } 1. 给anaconda ...

  10. 人工智能 deepface 换脸技术 学习

    介绍 Deepface是一个轻量级的python人脸识别和人脸属性分析(年龄.性别.情感和种族)框架.它是一种混合人脸识别框架缠绕状态的最先进的模型:VGG-Face,Google FaceNet,O ...