There are several blocks with different backgrounds. Is it possible to add them a second background on the CSS, for example, on hover?

.class:hover { background-image: url(здесь как-то сохраняется оригинальный фон блока), url(добавляется второй фон); }

There are a lot of blocks, so the option for everyone to just copy the original background + to attribute the second is not too suitable. Need a solution for all blocks at once.

  • one
    You can not set 2 backgrounds at once. - Don2Quixote 4:04 pm
  • Most likely it is unlikely to retain the original background: hover will override it. Here you can either explicitly specify in styles, or contrive with the imposition of blocks on each other, and prescribe a hover for the top one. - MAX
  • one
    show html .. - Surplus Surplus
  • one
    @ArtyomZinovyev developer.mozilla.org/ru/docs/Web/CSS/… - Andrey Fedorov
  • one
    The author either wants stupidity, or can not explain what exactly he does not work. - Andrey Fedorov

3 answers 3

Ideas run out ...

 function fAddBgImage(sClass, sImageAndPos) { let aBlocks = document.querySelectorAll(sClass); let aImageAndPos = sImageAndPos.split(' '); aBlocks.forEach(function(element) { sBgImage = getComputedStyle(element).backgroundImage; sBgPos = getComputedStyle(element).backgroundPosition; element.addEventListener('mouseenter', event => { element.style.backgroundImage = 'url(' + aImageAndPos[0] + '), ' + sBgImage; element.style.backgroundPosition = aImageAndPos[1] + ' ' + aImageAndPos[2] + ', ' + sBgPos; }) element.addEventListener('mouseleave', event => { element.style.backgroundImage = ''; element.style.backgroundPosition = ''; }) }); } fAddBgImage('.class_script', 'https://www.gravatar.com/avatar/3a0245702f6ce1969137e44750ca54a9?s=328&d=identicon&r=PG -20% -20%'); 
 .wrap { display: flex; flex-flow: row nowrap; } .class_manual, .class_before, .class_after, .class_script { height: 180px; width: 100%; font: 14px 'Arial'; color: #ffdb00; border: 1px solid #333; background-repeat: no-repeat; text-shadow: 1px 1px 4px black; } .class_manual { background-image: url(https://i.stack.imgur.com/gJi51.jpg?s=328&g=1); background-position: 0px 0px; } .class_manual:hover { background-image: url(https://www.gravatar.com/avatar/3a0245702f6ce1969137e44750ca54a9?s=328&d=identicon&r=PG), url(https://i.stack.imgur.com/gJi51.jpg?s=328&g=1); background-position: -20% -20%, 0px 0px; } .class_before { background-image: url(https://i.stack.imgur.com/gJi51.jpg?s=328&g=1); background-position: 0px 0px; position: relative; overflow: hidden; } .class_before:hover::before { content: ''; position: absolute; width: 100%; height: 100%; display: block; background-image: url(https://www.gravatar.com/avatar/3a0245702f6ce1969137e44750ca54a9?s=328&d=identicon&r=PG); background-position: -20% -20%; background-repeat: no-repeat; } .class_after { background-image: url(https://i.stack.imgur.com/gJi51.jpg?s=328&g=1); background-position: 0px 0px; position: relative; overflow: hidden; } .class_after:hover::after { content: ''; position: absolute; width: 100%; height: 100%; display: block; background-image: url(https://www.gravatar.com/avatar/3a0245702f6ce1969137e44750ca54a9?s=328&d=identicon&r=PG); background-position: -20% -20%; background-repeat: no-repeat; } .class_script { background-image: url(https://i.stack.imgur.com/gJi51.jpg?s=328&g=1); background-position: 0px 0px; } 
 <div class="wrap"> <div class="class_manual"><strong>С использованием ручной правки</strong><br><em>Не подходит, в виду большого количества блоков с разными фонами. Здесь для образца.</em></div> <div class="class_before"><strong>С использованием псевдоэлемента ::before</strong><br><em>Подходит не для всякой цели, т.к. перекрывает содержимое родительского блока.</em></div> <div class="class_after"><strong>С использованием псевдоэлемента ::after</strong><br><em>Подходит не для всякой цели, т.к. вытесняется содержимым родительского блока.</em></div> <div class="class_script"><strong>С использованием JavaScript</strong><br><em>Простой, надёжный и удобный способ, управлять фоновым изображением из скрипта.</em></div> </div>

    @UModeL, so that the pseudo-element does not overlap the contents of the block, you need to wrap its (contents) in the element and set position:relative .

     *{ box-sizing:border-box; } .block{ max-width:300px; margin:20px auto 0; padding:20px; background:linear-gradient(#cda,#acd); position:relative; } .block__content{ position:relative; z-index:2; } .block:before{ content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; opacity:0; background:radial-gradient(circle at center,#cda,#dac) no-repeat center/80%; transition:all .2s ease; } .block:hover:before{ opacity:1; } 
     <div class="block"> <div class="block__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam fugit obcaecati laborum natus ad odio inventore facere similique reprehenderit quod!</div> </div>

    • so you will need to add an extra div for each block. My wrapper is only for aligning the examples, and the blocks themselves, as in the initial conditions, are styled through CSS. - UModel
    • @UModeL, you can not add an extra element, but set the position:relative immediate descendants of the block: .block>*{position:relative} . Just with a wrapper, in my opinion, more correctly. - zhurof
    • better, yes ... we just don’t know what content will be in blocks. If this is plain text (without p , em , b , span , etc.), then there will be nothing relatively positioned)) - UModeL

    Give them a general class. For example:

     .item_1 { background-image: url("../img/bg1.jpg"); } .item_2 { background-image: url("../img/bg2.jpg"); } .item:hover { background-image: url("../img/bg.jpg"); } <div class="list"> <div class="item item_1"></div> <div class="item item_2"></div> <div class="item item_3"></div> <div class="item item_4"></div> </div>