通过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. leedcode 刷题-V2

    leetcode 字符串类 数组类 链表类 树类 二叉树类 图类 数学类 数据结构类 1. 稀疏相似度 (倒排索引) (https://leetcode-cn.com/problems/sparse- ...

  2. springboot使用MD5加密

    (11条消息) SpringBoot项目-密码MD5加密_springboot md5加密_wdfxfff的博客-CSDN博客 (11条消息) 创建MD5工具类_md5依赖_天天喝旺仔的博客-CSDN ...

  3. UIPath踩坑记一开发环境检查

      第一步:设置--设计--关闭新项目使用新式体验   第二步:Uipath与浏览器的通信护展是否已安装,如果没有安装需要点击安装   第三步:浏览器中安装的扩展是否已经打开

  4. 转发:基于pnpm + lerna + typescript的最佳实践

    Part1 Pnpm pnpm是一款当代受欢迎 新兴(问题较多) 的包管理工具. 为什么会出现pnpm?因为yarn的出现并没有满足作者的一些期待,反而有些失望. After a few days, ...

  5. 西电oj73题字符串处理

    问题描述 有一种简单的字符串压缩算法,对于字符串中连续出现的同一个英文字符,用该字符加上连续出现的次数来表示(连续出现次数小于3时不压缩).例如,字符串aaaaabbbabaaaaaaaaaaaaab ...

  6. Hash中的bucket什么意思?

    这个好理解.无序容器的内部是由一个个的bucket(桶)构成的,每个bucket里面由相同hash的元素构成. 因此无序容器的搜索是先根据hash值,定位到bucket,然后再在bucket里面搜索符 ...

  7. WSL终端无法启动

    WSL终端无法启动 1.状态 (1)宿主系统重新启动后,通过菜单项无法启动终端. (2)在powershell中,通过命令:wsl -l -v,查看子系统均为为stopped状态. (3)Powers ...

  8. HTML-CSS常用代码

    注释标签:对代码进行说明<!-- 单行注释,也可以对多行文字进行注释 -->常用格式标签<b>加粗</b> <i>斜体</i> <u& ...

  9. GO语言学习笔记-包结构篇 Study for Go ! Chapter eight - Package Structure

    持续更新 Go 语言学习进度中 ...... GO语言学习笔记-类型篇 Study for Go! Chapter one - Type - slowlydance2me - 博客园 (cnblogs ...

  10. 文件的上传&预览&下载学习(五)

    1.背景 一个知识库,要求文件对不同的角色有不同的实现,比如某些角色只能在线预览,某些可以下载.在线观看. 2.分析 知识库其实也可以看做商品表,商品有商品图片(商品表与文件信息表做关联,因为商品有多 ...