有色图像的线性渐变黑客：我做错了吗？

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);
}

对我来说，它似乎不起作用。小提琴：https://jsfiddle.net/w6jnv67c/

知道我做错了吗？

Answer 1

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

图像位于div的左上角，在这种情况下，意味着图像的该区域没有任何内容可供查看。

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

＆＃13;

＆＃13;

<div class="tinted-image">

</div>

＆＃13;

background-size

＆＃13;

＆＃13;

＆＃13;

因此，如果您希望图像适合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: 50px; height: 50px; background-size: cover; }。

＆＃13;

＆＃13;

<div class="tinted-image">

</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;