CSS背景图像HTML img [复制]

This question already has an answer here:

这个问题在这里已有答案：

CSS background image on top of <img> 2 answers
CSS背景图片在 2个答案之上

I was wondering whether it's possible to get background-image to be on top of all html img's in a certain div (like a sort of mask)

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

I tried:

我试过了：

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

6 个解决方案

#1

try to use padding instead of using width and 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;
}

#2

For a background image to cover another image, it must be a background on an element that covers said image (e.g. one that is absolutely positioned).

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

An element's own background cannot appear above its content.

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

#3

No, the image defined in the <img src=''> is the foreground content of the element.

不， CSS背景图像HTML img [复制] 中定义的图像是元素的前景内容。

The background-image is the background of the element. It is shown behind any content.

背景图像是元素的背景。它显示在任何内容背后。

The clue is in the name.

线索就在名字中。

The only way you can get a background image to appear on top of the foreground content is for it to be the background of a separate element that is positioned on top of the main element.

使背景图像显示在前景内容之上的唯一方法是使其成为位于主元素顶部的单独元素的背景。

You can do this without additional HTML markup by making use of the CSS ::before pseudo-selector. This adds a CSS-controlled element to the page next to your main element in the DOM. This can then be styled with z-index and positioning, so that is is on top of the main element. Then its background-image will appear on top of the main image from the original element.

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

However, ::before is not supported on img tags in all browsers, so this technique is not recommended.

但是，所有浏览器中的img标记都不支持:: before，因此不建议使用此技术。

#4

Just use a div to place a background on another background? Give the body a background and your div?

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

#5

To start with, I created a custom image size of 315px * 270px

首先，我创建了一个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' );

}

I ended up using add_filter function (in wordpress) to replace tags which had width of 315px and height of 270px with 2 div's (one for the mask and one for the picture)

我最终使用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');

#6

Its bad practice to do that for background images, you will end up with alot of dirty code. And I thing its unnecessary, cause the reason you put an image as a background you want it to be the first layer on the z-index (that is the whole concept behind background-image:url('./images/image-mask-2.png');)

对于背景图像来说，这是不好的做法，你最终会得到很多脏代码。我认为这是不必要的，因为你把图像作为背景的原因，你希望它成为z-index上的第一层（这是背景图像背后的整个概念：url（'./ images / image-mask -2.png'）;）

#1