htmlcss 添加图片-前端入门

通过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等。

这里推荐一下我的前端学习交流圈：767273102 ，里面都是学习前端的从最基础的HTML+CSS+JS炫酷特效，游戏，插件封装，设计模式到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。2020最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

学习前端，我们是认真的