Изменение только части сокращенного свойства

ProgramBox

Изменение только части сокращенного свойства

Post author:admin
Запись опубликована:13 марта, 2023
Post category:Вопросы по программированию

#css

Вопрос:

Я хотел бы изменить стиль выбранного элемента меню. Здесь у меня есть 3 ссылки меню, и у каждой из них разный фон изображения и один и тот же линейный градиент.

 #items-category-link{
    background: url("assets/user-panel/items-category.png") no-repeat 9px center, linear-gradient(90deg, rgba(229,217,187,1) 0%, rgba(214,195,138,1) 100%);
}
#logout-link{
    background: url("assets/user-panel/logout.png") no-repeat 9px center, linear-gradient(90deg, rgba(229,217,187,1) 0%, rgba(214,195,138,1) 100%);
}
#wheel-link{
    background: url("assets/user-panel/wheel.png") no-repeat 9px center, linear-gradient(90deg, rgba(214,195,138,1) 0%, rgba(229,217,187,1) 50%, rgba(214,195,138,1) 100%);
}

Дело в том, что я хотел бы изменить только линейный градиент при нажатии.

Таким образом, в Javascript при нажатии на ссылку user-panel-item-selected добавляется класс.

Как я могу заменить старый градиент новым градиентом, не удаляя фоновое изображение? Я попробовал это :

 .user-panel-item-selected{
    background: linear-gradient(90deg, rgba(213,180,92,1) 0%, rgba(228,209,156,1) 50%, rgba(213,180,92,1) 100%) !important;
}

Большое спасибо!

1. Даже если вы укажете только background-image , CSS недостаточно выразителен, чтобы позволить вам добавить или вычесть один background-image слой: вам нужно повторить все значение свойства.

2. Вы путаете сокращенные свойства (например background: ) со свойствами коллекции (многозначными свойствами) (например background-image ). Несмотря на background-image то, что это свойство longhand включено background , тот факт, что вы можете переопределять отдельные свойства longhand, не связан с тем фактом, что вы не можете переопределить один элемент в свойстве collection. Мы не можем ожидать, что это ограничение CSS будет исправлено в течение как минимум десятилетия с такой скоростью…

3. Хорошо, спасибо и извините за мое замешательство! Я полагаю, это то же самое, если я попытаюсь изменить градиентный слой с помощью Javascript?

4. Правильно. CSSOM JavaScript предоставляет backgroundImage свойство как одно string значение, но, по крайней мере, с помощью JavaScript вы можете использовать строковые операции для преобразования значения свойства, а не слепо перезаписывать его.

5. Решением может быть использование псевдоэлемента ::after или ::before для части вашего фона

Ответ №1:

Этот фрагмент здесь может помочь. Сохраняет URL-адрес с помощью регулярного выражения, а затем добавляет ваш новый градиент и, наконец, задает стиль.

 function changeGrad() {
 let div = document.getElementById("logout-link");
 let backgroundImageUrl = getComputedStyle(div).backgroundImage.match(/url(([^)] ))/i);
 if (backgroundImageUrl.length > 0) {
 div.style.backgroundImage = backgroundImageUrl[0]   ", linear-gradient(90deg, rgba(213,180,92,1) 0%, rgba(228,209,156,1) 50%, rgba(213,180,92,1) 100%)"
 }
}

 #items-category-link{
    background: url("assets/user-panel/items-category.png") no-repeat 9px center, linear-gradient(90deg, rgba(229,217,187,1) 0%, rgba(214,195,138,1) 100%);
}
#logout-link{
    background: url("assets/user-panel/logout.png") no-repeat 9px center, linear-gradient(90deg, rgba(229,217,187,1) 0%, rgba(214,195,138,1) 100%);
}
#wheel-link{
    background: url("assets/user-panel/wheel.png") no-repeat 9px center, linear-gradient(90deg, rgba(214,195,138,1) 0%, rgba(229,217,187,1) 50%, rgba(214,195,138,1) 100%);
}

div {
 width: 50px;
 height: 50px;
}

 <html>
<div id="items-category-link"></div>
<div id="logout-link"></div>
<div id="wheel-link"></div>
<button onclick="changeGrad()">Change LG of Logout Link</button>
</html>

Ответ №2:

Вы можете использовать псевдоэлемент after или before для имитации нескольких фонов и упростить изменение только одного из них.

 nav > a{
  display: block;
  float: left;
  width: 100px;
  height: 50px;
  background-image: linear-gradient(red, green);
}

nav > a:hover{
  background-image: linear-gradient(red, yellow);
}

nav > a::after{
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  height: 50px;
  background: url('https://via.placeholder.com/40') center no-repeat;
}

 <nav>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
</nav>

Ответ №3:

Используйте переменные CSS:

 #items-category-link {
  background:
    url("assets/user-panel/items-category.png") no-repeat 9px center,
    var(--c, linear-gradient(90deg, rgba(229, 217, 187, 1) 0%, rgba(214, 195, 138, 1) 100%));
}

#logout-link {
  background: 
    url("assets/user-panel/logout.png") no-repeat 9px center, 
    var(--c, linear-gradient(90deg, rgba(229, 217, 187, 1) 0%, rgba(214, 195, 138, 1) 100%));
}

#wheel-link {
  background: 
    url("assets/user-panel/wheel.png") no-repeat 9px center, 
    var(--c, linear-gradient(90deg, rgba(229, 217, 187, 1) 0%, rgba(214, 195, 138, 1) 100%));
}

.user-panel-item-selected {
  --c: linear-gradient(90deg, rgba(213, 180, 92, 1) 0%, rgba(228, 209, 156, 1) 50%, rgba(213, 180, 92, 1) 100%);
}