Для того чтобы иметь блоки с одинаковыми параметрами в CSS, но с разными фоновыми изображениями, можно воспользоваться CSS-свойством background-image
. Вот несколько способов достижения этого:
1. Использовать уникальные классы для каждого блока в HTML и задать отдельные свойства background-image
для каждого класса в CSS. Например:
HTML:
<div class="block1"></div> <div class="block2"></div>
CSS:
.block1 { background-image: url('путь_к_изображению1'); /* другие параметры стиля */ } .block2 { background-image: url('путь_к_изображению2'); /* другие параметры стиля */ }
2. Использовать атрибут style
в HTML и вставить прямо в него свойство background-image
с уникальным значением для каждого блока. Например:
<div style="background-image: url('путь_к_изображению1');"></div> <div style="background-image: url('путь_к_изображению2');"></div>
3. Если вам нужно динамически менять фоновые изображения с помощью JavaScript, то можно использовать классы или атрибуты данных (data-*
) для идентификации блоков и задавать свойства стилей с помощью JavaScript. Например:
HTML:
<div class="block" data-image="путь_к_изображению1"></div> <div class="block" data-image="путь_к_изображению2"></div>
CSS:
.block { /* общие параметры стиля */ }
JavaScript:
const blocks = document.querySelectorAll('.block'); blocks.forEach(block => { const imagePath = block.dataset.image; block.style.backgroundImage = `url('${imagePath}')`; });
Надеюсь, что это поможет вам создавать блоки с одинаковыми параметрами в CSS, но с разными фоновыми изображениями.