как настроить целевой фоновый слой CSS3 для модификации в CSS и / или JS - PullRequest
Новая
       8

как настроить целевой фоновый слой CSS3 для модификации в CSS и / или JS

0 голосов
/ 26 июня 2018

Как описано здесь ...

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

... CSS3 поддерживает разделенный запятыми синтаксис списка для наложения нескольких фонов на один элемент.Вот их пример css: 

 background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat,
      no-repeat,
      no-repeat;
  background-position: bottom right,
      left,
      right;

Допустим, я хочу изменить только один из этих слоев позже, например, через JS или с помощью псевдокласса :hover.Как я смогу нацелить только один из этих слоев.

Например, предположим, что я хочу переместить логотип firefox с bottom right на top right, и я хочу изменить слой bubbles.png наповторять

Как мне добиться этого с помощью CSS?

Как насчет JS?

1 Ответ

0 голосов
/ 26 июня 2018

Тривиальным способом является переопределение 3 значений: 

.box {
 width:200px;
 height:200px;
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat,
      no-repeat,
      no-repeat;
  background-position: bottom right,
      left,
      right;
}
.box:hover {
background-repeat: repeat,
      no-repeat,
      no-repeat;
background-position: bottom right,
      bottom,
      right;
}
<div class="box"></div>

Или вы можете использовать переменную CSS, чтобы определить нужные значения, и вы можете изменить их позже, не изменяя другие: 

.box {
 width:200px;
 height:200px;
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: var(--r,no-repeat),
      no-repeat,
      no-repeat;
  background-position: bottom right,
      var(--p,left),
      right;
}
.box:hover {
   --r:repeat;
   --p:right;
}
<div class="box"></div>

Вы также можете сделать то же самое, используя JS: 

document.querySelector(".box").addEventListener('click',function(e) {
  e.target.style.setProperty('--r','repeat');
  e.target.style.setProperty('--p','right');
})
.box {
 width:200px;
 height:200px;
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: var(--r,no-repeat),
      no-repeat,
      no-repeat;
  background-position: bottom right,
      var(--p,left),
      right;
}
<div class="box"></div>
...