html/css 添加图片
通过img.src添加图片
添加一个img元素,设置content,会发现在IE、safari等浏览器内显示为空白。
一般我们使用img,是通过src来设置的,可以通过react的import图片添加。
<img className="headerMenuEntryImg" src={MenuEntryImg}/>
通过background-image以背景来添加图片
先添加一个img元素:
通过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 添加图片的更多相关文章
- CSS 背景图片 添加 重复和定位。
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- iText + Freemarker实现pdf的导出,支持中文、css以及图片,页眉页脚,页眉添加图片
本文为了记录自己的实现过程,具体的实现步骤是参考博文 https://www.cnblogs.com/youzhibing/p/7692366.html 来实现的,只是在他的基础上添加了页眉页脚及页眉 ...
- css008 给网页添加图片
css008 给网页添加图片 1. css和<img>标签 1.<img>标签是html的添加图片的标签,一般为: <img src=” ...
- CSS3-给网页添加图片
给网页添加图片: 1.background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上 ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- 使用CSS将图片转换成黑白(灰色、置灰)z转
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
- mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效
引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- 转: 用css把图片转为灰色图
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
随机推荐
- NRF52832的FDS程序,参考非蓝牙例程修改而来(需要增加DFU的基础上只要增加如下程序即可解决)
/* Dummy configuration data. */ static configuration_t m_dummy_cfg = { .config1_on = false, .config2 ...
- Flush cache via menu in D365FO
Most of the time it is a caching issue because D365fO is (like previous versions) a master of cachin ...
- RabbitMQ service does not start due to corrupted mnesia database in RSA Security Analytics
rabbitmq异常:mnesia database损坏
- USB 驱动框架分析
这里先说一些概念性的东西,了解一下USB 一.关于usb设备 都见过很多,用过很多了,每当我们插上一个usb设备到pc的时 右下角就会弹出一个提示信息,提示"发现xxx"设备,再接 ...
- centos7所有用户循环登录
1 使用快捷键Ctrl+Alt+F2进入命令终端 2 输入账号密码 3 输入 /usr/bin/sudo 4 输入 startx 那种单用户,改配置的试了没有用
- 微信小程序-实现微信登录
业务流程: 1:首先需要一个按钮触发事件 2:调用微信小程序的登录接口wx.login,拿到code 3:调用微信小程序的获取用户信息的接口wx.getUserProfile,拿到用户的个人信息 4: ...
- Django视图中的请求与响应
一 请求 一 限制http请求 视图中的request,实际上是django源码中的HTTPRequest的子类WSGIRequest类的实例对象,主要由django对客户端请求的http协议报文进行 ...
- 如何搭建属于自己的服务器(Linux7.6版)
从0搭建属于自己的服务器 最近小伙伴推荐的华为云活动,购买服务器相当的划算,本人也是耗费巨资购买了一台2核4G HECS云服务器. 话不多说,在这里给华为云打一个广子,活动力度还是很不错的. 活动详情 ...
- 痞子衡嵌入式:在i.MXRT1060-EVK上利用memtester程序给SDRAM做压力测试
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是在i.MXRT1060-EVK上利用memtester程序给SDRAM做压力测试. 我们知道恩智浦i.MXRT1xxx系列是高性能MCU ...
- vmware workstation 版本合集
各版本序列号 10.x:1Z0G9-67285-FZG78-ZL3Q2-234JG 11.x:YG74R-86G1M-M8DLP-XEQNT-XAHW2 12.x:ZC3TK-63GE6-481JY- ...