html - 有色图像的线性渐变 hack : Am I doing it wrong?

Question

正在阅读如何在 https://css-tricks.com/tinted-images-multiple-backgrounds/ 上进行操作

/* Working method */
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

不过，对我来说，这似乎行不通。 fiddle :https://jsfiddle.net/w6jnv67c/

知道我做错了什么吗？

Answer 1

在这种情况下，您做错的是不允许图像的大小。

图片位于 div 的左上角，在本例中，这意味着图片的该区域没有任何内容。

只需将 div 放大一点，您就会看到。

.tinted-image {
  background:
  /* top, transparent red, faked with gradient */
  linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),
  /* bottom, image */
  url(http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
  width: 75px;
  height: 75px;
}

<div class="tinted-image">

</div>

因此，如果您希望图像适合 div，则必须使用 background-size。

.tinted-image {
  background:
  /* top, transparent red, faked with gradient */
  linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),
  /* bottom, image */
  url(http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
  width: 50px;
  height: 50px;
  background-size: cover;
}

<div class="tinted-image">

</div>