HTML img上的CSS背景图像[重复]答案

【问题标题】：CSS Background-image over HTML img [duplicate]HTML img上的CSS背景图像[重复]
【发布时间】：2015-06-21 09:09:48
【问题描述】：

我想知道是否有可能让背景图像位于某个 div 中的所有 html img 之上（就像一种掩码）

我试过了：

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

【问题讨论】：

对背景图像这样做是不好的做法，你最终会得到很多脏代码。而且我认为它是不必要的，因为您将图像作为背景的原因是您希望它成为 z-index 的第一层（这就是 background-image:url('./images/image-mask-2.png'); 背后的整个概念）
您可以使用 JavaScript 还是只需要 CSS？

标签： html css

【解决方案1】：

尝试使用填充而不是使用宽度和高度

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

【讨论】：

这应该是正确的答案。

【解决方案2】：

对于覆盖另一张图像的背景图像，它必须是覆盖该图像的元素上的背景（例如，绝对定位的）。

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

【讨论】：

这几乎是我的想法，但我希望有一种简单易行的方法在图像上放置蒙版。由于图像被放入 wordpress 中的内容中（没有任何特定模式），我需要将它应用于“内容”div 中的所有图像。有什么建议吗？

【解决方案3】：

不，<img src=''> 中定义的图像是元素的前景内容。

background-image 是元素的背景。它显示在任何内容的后面。

线索就在名字里。

让背景图像出现在前景内容之上的唯一方法是让它成为位于主元素之上的单独元素的背景。

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

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

【讨论】：

【解决方案4】：

只使用一个 div 将背景放在另一个背景上？给 body 一个背景和你的 div？

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

首先，我创建了一个 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 中）将宽度为 315px、高度为 270px 的标签替换为 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');

【讨论】：