码迷,mamicode.com
首页 > Web开发 > 详细

html/css 添加图片

时间:2020-06-29 13:33:15      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:nbsp   ade   enter   mamicode   content   imp   元素   设置图片背景   info   

通过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 添加图片

标签:nbsp   ade   enter   mamicode   content   imp   元素   设置图片背景   info   

原文地址:https://www.cnblogs.com/kybs0/p/13207280.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!