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 ...
随机推荐
- Python操作数据库读书笔记
SQLite 简介 什么是 SQLite? SQLite是一个进程内的库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数据库引擎.它是一个零配置的数据库,这意味着与其他数据库一样,您不需 ...
- python读取i3dm数据
path = r'D:\data\1.i3dm'f = open(path, 'rb')f.seek(4)print('version:%d' % struct.unpack('I', f.read( ...
- 3-XSS漏洞
1.XSS原理 跨站脚本攻击是一种针对网站应用程序的安全漏洞攻击技术,是代码注入的一种.它允许恶意用户将代码注入网页,其他用户在浏览网页时会受到影响.恶意用户利用xss代码攻击成功后,可能得到很高的权 ...
- 深入理解css 笔记(完)
一个网站,从看起来还可以,到看起来非常棒,差别在于细节.在实现了页面里 某个组件的布局并写完样式之后,不要急着继续,有意识地训练自己,以挑剔的眼光审视刚刚完成的代码.如果增加或者减少一点内边距是不是看 ...
- PHP接受json数据
PHP接受json数据 获取请求的参数 $input = file_get_contents("php://input"); $input = json_decode($input ...
- selenium---xpath定位方法详解
Xpath定位 验证xpath写的是否正确: 1.打开浏览器检查页面,Ctrl+F,把路径输入进去,如果可以定位到的位置只有一个,说明是对的 2.在需要定位的页面,按F12后,切换至console ...
- celery在Django项目中的使用案例
一.逻辑分析 第一步:在项目根目录新建包 第二步:在使用提交异步任务的位置,导入使用即可 视图函数中使用,导入任务 任务.delay() # 提交任务 第三步:启动worker,如果有定时任务,启动b ...
- 在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载的对象接口
在基于vue-next-admin 的 Vue3+TypeScript 前端项目中,可以整合自己的 .NET 后端,前端操作一些功能的时候,为了使用方便全局挂载的对象接口,以便能够快速处理一些特殊的操 ...
- 支付回调MQ消息的幂等处理及MD5字符串es中的使用及支付宝预授权完成
支付回调MQ消息的幂等处理及MD5字符串es中的使用及支付宝预授权完成 1.幂等的处理,根据对象的转json 转md5作为key,退款的处理 控制发送端?业务上比较难控制.支付异步通知,退款有同步通知 ...
- ChatGPT如何助力DevOps|用例解读
DevOps 是一种方法论,旨在提高软件开发和 IT 运营团队的协作和效率.DevOps 涉及各种任务和流程的自动化,例如规划.编码.测试.部署.监控和故障排除.然而,其中一些任务和流程仍然有大量任务 ...