通过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. v-imgerror作用:当图片链接无效的时候,显示默认图片内容

    // 回顾自定义指令 // 作用: 自定义一些对DOM的操作快捷指令 // 前提: 指令就是用来操作DOM (v-if/v-show/v-for....) // 语法: Vue.directive(指 ...

  2. input number类型去掉箭头和禁用滚轮

    input number类型可以输入整型.浮点型.科学计数法的数据 禁用滚轮,在input标签内添加onmouseWheel="return false" <input ty ...

  3. CH573 CH582 CH579蓝牙从机(peripheral)例程讲解六(蓝牙设置白名单)

    蓝牙从机设置白名单,可以只扫描应答(白名单中列出的)设备,只允许(白名单中列出的)设备连接. 蓝牙主机设置白名单,可以只扫描.连接特定的蓝牙设备(白名单中列出的). 一.蓝牙从机白名单设置有关的函数介 ...

  4. P2671 [NOIP2015 普及组] 求和

    [NOIP2015 普及组] 求和 题目背景 NOIP2015 普及组 T3 题目描述 一条狭长的纸带被均匀划分出了\(n\)个格子,格子编号从\(1\)到\(n\).每个格子上都染了一种颜色\(co ...

  5. cenos7配置epel源

    1.首先进入/etc/yum.repos.d/目录下,新建一个repo_bak目录,用于保存系统中原来的repo文件 [root@bogon ~]# cd /etc/yum.repos.d/ [roo ...

  6. vue中的观察者模式和发布订阅者模式

    观察者模式 目标者对象和观察者对象有相互依赖的关系,观察者对某个对象的状态进行观察,如果对象的状态发生改变,就会通知所有依赖这个对象的观察者, 目标者对象 Subject,拥有方法:添加 / 删除 / ...

  7. redis学习(二)数据类型

    hash类型 • string 类型的键值对集合 • redis 中数据类型不支持嵌套,例如不能在 hash 中设置值为 hash • 适合用于存储对象 • 每个 hash 可以存储 2 32 -1 ...

  8. RecyclerView显示列表

    本次要讲的内容是利用RecyclerView显示Users列表的信息,如下图所示. 首先我们来创建模型User.java package com.example.mytest.User; import ...

  9. simpleini库的介绍和使用(面向业务编程-格式处理)

    simpleini库的介绍和使用(面向业务编程-格式处理) 介绍 simpleini是一个跨平台的ini格式处理库,提供了一些简单的API来读取和写入ini风格的配置文件.它支持ASCII.MBCS和 ...

  10. 明解STM32—GPIO理论基础知识篇之八种工作模式

    一.引言 在之前围绕STM32的GPIO的基本结构进行了介绍,图1为STM32的5V容忍的GPIO口内部基本结构图,图2为GPIO的基本结构中各个模块部分的概述. 阅读GPIO基本结构的内容能够对GP ...