HTML 图像占位符

Posted 2021-05-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 图像占位符相关的知识，希望对你有一定的参考价值。

http://placehold.it/350x150


or



&lt;img src=&quot;http://placehold.it/350x150&quot;&gt;

html 图像替换扩展占位符

<div class="header">
<div class="logo"><h1 class="title ir">h1.title</h1></div>
<div class="navigation"><p>navigation goes here</p></div>
<div class="social"></div>
</div>

.logo, .social {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: transparent;
}

.logo {
  background-image: url(http://i.imgur.com/yYnyJ.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 200px;
  height: 200px;
}

.social {
  background-image: url(http://i.imgur.com/yYnyJ.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
}

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

%ir {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: transparent;
}	
.logo {
  @extend %ir;
  background-image: url(http://i.imgur.com/yYnyJ.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
}
.social {
  @extend %ir;
  background-image: url(http://i.imgur.com/yYnyJ.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
}

<div class="header">
<div class="logo"><h1 class="title ir">h1.title</h1></div>
<div class="navigation"><p>navigation goes here</p></div>
<div class="social"></div>
</div>

以上是关于HTML 图像占位符的主要内容，如果未能解决你的问题，请参考以下文章

html 图像替换扩展占位符和在sass中使用extend的示例

为啥我需要图像占位符服务或库？