HTML img 上的 CSS 背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18700136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Background-image over HTML img
提问by Mangled
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;
}
采纳答案by Abdulrazak Alkl
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;
}
回答by Quentin
For a background image to cover another image, it must be a background on an elementthat covers said image (e.g. one that is absolutely positioned).
对于覆盖另一幅图像的背景图像，它必须是覆盖所述图像的元素上的背景（例如，绝对定位的）。
An element's own background cannot appear above its content.
元素自身的背景不能出现在其内容之上。
回答by Spudley
No, the image defined in the <img src=''>is the foreground contentof the element.
不，在 中定义的图像<img src=''>是元素的前景内容。
The background-imageis the backgroundof the element. It is shown behind any content.
的background-image是背景的元件的。它显示在任何内容的后面。
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 ::beforepseudo-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-indexand positioning, so that is is on top of the main element. Then its background-imagewill appear on top of the main image from the original element.
通过使用 CSS::before伪选择器，您无需额外的 HTML 标记即可完成此操作。这会将 CSS 控制的元素添加到 DOM 中主要元素旁边的页面。然后可以使用z-index和定位来设置样式，因此它位于主要元素的顶部。然后它background-image会出现在原始元素的主图像的顶部。
However, ::beforeis not supported on imgtags in all browsers, so this technique is not recommended.
但是，::before并非img所有浏览器的标签都支持，因此不推荐使用此技术。
回答by Loko
Just use a div to place a background on another background? Give the body a background and your div?
只需使用 div 将背景放置在另一个背景上？给身体一个背景和你的 div？
回答by Mangled
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(); width:315px; height:270px; float:left;"><div class="mask"></div></div>', $content);
}
add_filter('the_content', 'some_filter_content');
回答by Simo D'lo Mafuxwana
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 上的第一层（这就是背后的整个概念background-image:url('./images/image-mask-2.png');）
