CSS背景图片覆盖HTML图像

Question

我想知道是否可以让background-image覆盖在某个div中所有html img的上方（就像一种掩蔽效果）

我尝试过：

#content img{
    position:relative;
    background-image:url('./images/image-mask-2.png');
    z-index:100;
}

- Mangled

---

这是一个不良的做法，特别是对于背景图像而言，你最终会得到很多脏代码。我认为这样做是不必要的，因为将图像作为背景的原因是希望它成为Z轴索引上的第一层（这是background-image:url('./images/image-mask-2.png');背后的整个概念）。 - Simo D'lo Mafuxwana

你是否可以使用JavaScript，还是只需要CSS？ - andi

Answer 1

尝试使用padding而不是使用width和height。

#content img{
    height: 0;
    width: 0;
    padding: 35px 120px; // adjust that depend on your image size
    background-image: url('YOUR_IMAGE_PATH');
    background-repeat: no-repeat;
}

- Abdulrazak Alkl

---

这应该是正确的答案。 - Jompis

Answer 2

要让背景图片覆盖在另一张图片上，必须将其设置为完全覆盖该图片的元素的背景（例如绝对定位的元素）。

元素自身的背景无法出现在其内容之上。

- Quentin

---

这基本上就是我想到的，但我希望有一种简单而容易的方法来给图片加上遮罩。 由于在WordPress中将图片放在内容中时（没有任何特定模式），我希望它适用于“内容”div中的所有图片。 有什么建议吗？ - Mangled

Answer 3

不，<img src=''>中定义的图像是元素的前景内容。 background-image是元素的背景。它显示在任何内容的后面。

提示就在名字里。

唯一的方法是将背景图像设置为另一个元素的背景，并将其定位在主要元素的顶部，以便在前景内容上方显示。

您可以通过使用CSS ::before 伪选择器来完成此操作，而无需添加其他HTML标记。这会将一个由CSS控制的元素添加到DOM中的主要元素旁边。然后可以使用z-index和定位对其进行样式设置，以使其位于主要元素的顶部。然后，它的background-image将出现在原始元素的主图像之上。

但是，并非所有浏览器都支持在img标签上使用::before，因此不建议使用此技术。

- Spudley

Answer 4

只需使用div在另一个背景上放置背景？给body设置背景和你的div即可。

- Loko

Answer 5

首先，我创建了一个自定义图像尺寸为315px * 270px。

add_action( 'after_setup_theme', 'image-size-setup' );
add_image_size( 'image-with-mask', 315, 270, true );

function image-size-setup() {

function custom_in_post_images( $args ) { $custom_images = array('image-with-mask' => 'Image with mask'); return array_merge( $args, $custom_images ); } add_filter( 'image_size_names_choose', 'custom_in_post_images' );

}

最终我使用了add_filter函数（在WordPress中），将宽度为315像素和高度为270像素的标签替换为2个div（一个用于遮罩，一个用于图片）

function some_filter_content($content) {
    $result = array();

    return preg_replace('/<img.class="(.*?)".src="(.*?)".width="315".height="270".\/>/i', '<div style="background: url($2); width:315px; height:270px; float:left;"><div class="mask"></div></div>', $content);

}
    add_filter('the_content', 'some_filter_content');

- Mangled

Answer 6

在背景图像方面这样做是不好的实践，你最终会得到很多脏代码。我认为这是不必要的，因为你将图像作为背景的原因是希望它成为z-index上的第一层（这就是background-image:url('./images/image-mask-2.png');背后的整个概念）

- Simo D'lo Mafuxwana