blocks|key|1453589|text|试着用填充物代替宽度和高度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1453590|#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;
}|code-block|syntax|javascript|1453591|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try to use padding instead of using width and height

<pre><code>#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;
}
</code></pre>

blocks|key|1453469|text|对于要覆盖另一图像的背景图像，必须是覆盖所述图像的元素上的背景(例如绝对定位的背景)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1453470|元素本身的背景不能出现在其内容之上。|1453471|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

blocks|key|2595641|text|不，<img+src=''>中定义的图像是元素的前台内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|2595642|background-image是元素的背景。它显示在任何内容的背后。|2595643|线索就在名字里。|2595644|要使背景图像出现在前台内容的顶部，唯一的方法是使其成为位于主元素顶部的单独元素的背景。|2595645|您可以通过使用CSS+::before伪选择器来实现这一点，而无需额外的HTML标记。这将向DOM中主元素旁边的页面添加一个CSS控制的元素。然后可以使用z-index和定位对其进行样式化，这样就可以将其放在主元素的顶部。然后它的background-image将出现在原始元素的主图像的顶部。|2595646|但是，并非所有浏览器的::before标记都支持img，因此不推荐这种技术。|2595647|entityMap^0|2|C|O|4|0|0|G|K|2|0|0|0|B|8|25|7|37|G|0|B|8|O|3|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|D]]|E|@]|F|$]]|$1|I|3|J|5|6|7|12|8|@]|E|@]|F|$]]|$1|K|3|L|5|6|7|13|8|@]|E|@]|F|$]]|$1|M|3|N|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|E|@]|F|$]]|$1|O|3|P|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|E|@]|F|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|E|@]|F|$]]]|R|$]]

No, the image defined in the <code>&lt;img src=''&gt;</code> is the foreground content of the element.

The <code>background-image</code> 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 <code>::before</code> 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 <code>z-index</code> and positioning, so that is is on top of the main element. Then its <code>background-image</code> will appear on top of the main image from the original element.

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

blocks|key|2595690|text|用div把背景放到另一个背景上？给身体一个背景和你的div？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2595691|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|2595675|text|对背景图像这样做是不好的做法，最终您将得到大量的脏代码。我认为这是不必要的，因为你把一个图像作为背景，你希望它成为z-索引的第一层(这是background-image:url('./images/image-mask-2.png');背后的整个概念)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2595676|entityMap^0|1W|1E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

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 <code>background-image:url('./images/image-mask-2.png');</code>)

blocks|key|1453556|text|首先，我创建了一个315+To+*270+To的自定义映像大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1453557|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'+);

}|code-block|syntax|javascript|1453558|最后，我使用add_filter函数(在wordpress中)将宽度为315+to、高度为270+to的标记替换为2个div(一个用于掩码，另一个用于图片)。|1453559|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');|1453560|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<pre><code>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' =&gt; 'Image with mask'); return array_merge( $args, $custom_images ); } add_filter( 'image_size_names_choose', 'custom_in_post_images' );

}
</code></pre>

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)

<pre><code>function some_filter_content($content) {
 $result = array();

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

}
 add_filter('the_content', 'some_filter_content');
</code></pre>

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)

I tried:

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

CSS Background-image over HTML img

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想知道是否有可能在特定的div中将背景图像放在html的所有img之上(就像一种掩码)。我试过：#content img{    position:relative;    background-image:url('./images/image-mask-2.png');    z-index:100;}

问CSS背景- HTML img上的图像
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS背景- HTML img上的图像EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS背景- HTML img上的图像
EN