CSS фоновое изображение над HTML IMG

Question

Я задавался вопросом, можно ли получить фоновое изображение, чтобы быть на вершине все HTML IMG-х в определенном DIV (как своего рода маски)

Я попытался:

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

Answer 1

пытаются использовать отступы вместо использования ширины и высоты

#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; 
} 

Answer 2

Для фонового изображения для покрытия другого изображения это должен быть фон на элементе , который покрывает указанное изображение (например, тот, который абсолютно позиционирован).

Собственный фон элемента не может отображаться над его содержимым.

Answer 3

Нет, изображение, заданное в <img src=''>, представляет собой содержимое переднего плана элемента.

background-image Элемент. Это показано за любым контентом.

Ключ от названия.

Единственный способ, по которому вы можете получить фоновое изображение, отображаемое поверх содержимого переднего плана, - это фон отдельного элемента, который расположен поверх основного элемента.

Вы можете сделать это без дополнительной разметки HTML, используя псевдоселектор CSS ::before. Это добавляет элемент, управляемый CSS, на страницу рядом с вашим основным элементом в DOM. Затем это можно создать с помощью z-index и позиционирования, так что он находится поверх основного элемента. Затем его background-image появится поверх основного изображения исходного элемента.

Однако ::before не поддерживается на img тегах во всех браузерах, поэтому этот метод не рекомендуется.

Answer 4

Неплохая практика сделать это для фоновых изображений, вы получите много грязного кода. И я считаю, что это ненужно, потому что причина, по которой вы помещаете изображение в качестве фона, вы хотите, чтобы он был первым слоем на z-index (то есть целая концепция за background-image:url('./images/image-mask-2.png');)

Answer 5

Просто используйте div, чтобы поместить фон на другом фоне? Дайте телу фон и ваш div?

Answer 6

Начнем с того, что я создал пользовательский размер изображения 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 функции (в WordPress), чтобы заменить метки, которые имели ширину в 315px и высотой 270px с 2 Див х (один для маски и один для изображения)

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');