html/css 添加图片

时间：2024-02-20 19:50:13

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

相关文章