background-image を特定の div 内のすべての html img の上に配置することが可能かどうか疑問に思っていました (一種のマスクのように)
私は試した:
#content img{
position:relative;
background-image:url('./images/image-mask-2.png');
z-index:100;
}
背景画像が別の画像を覆うには、その画像を覆う要素の背景でなければなりません(例: 絶対配置されたもの)。
要素自体の背景は、そのコンテンツの上に表示できません。
div を使用して背景を別の背景に配置するだけですか? 体に背景とあなたのdivを与えますか?
まず、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');