html - HTML img 上の CSS 背景画像

Question

background-image を特定の div 内のすべての html img の上に配置することが可能かどうか疑問に思っていました (一種のマスクのように)

私は試した：

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

Answer 1

背景画像が別の画像を覆うには、その画像を覆う要素の背景でなければなりません(例: 絶対配置されたもの)。

要素自体の背景は、そのコンテンツの上に表示できません。

Answer 2

div を使用して背景を別の背景に配置するだけですか? 体に背景とあなたのdivを与えますか?

Answer 3

まず、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 関数 (ワードプレス) を使用して、幅 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');