Условный CSS - Тень отображается только в том случае, если цвет фона не непрозрачен.

Question

Я искал это довольно много, но не нашел никого, кто пытался бы решить эту проблему, которую я считаю странной. Я бы сказал, что у меня более 6 лет опыта работы с фронтендом, и я, честно говоря, не знаю лучшего подхода. / формировать эти блоки. Чтобы немного стилизовать их, мы добавили к div элементам box-shadow, чтобы они выглядели лучше. Проблема возникает, когда пользователь решает использовать прозрачный фон (мы используем rgba для bg-color, и у вас есть ползунок, который может сделать непрозрачность 0), а затем тень блока все еще остается, и она не выглядит хорошо. Я пытался написать условное CSS для этого, но не думаю, что это возможно.

Единственное решение, которое я могу придумать, - это иметь класс, который не имеет тени блока с важным для отмените его и с помощью jQuery проанализируйте bg-color и найдите значение Opacity - если его 0, добавьте этот класс. Это кажется очень неуклюжим и плохим подходом, но, может быть, эта проблема настолько уникальна, что это единственное решение? Заинтересован в том, чтобы слышать мысли людей.

Answer 1

https://jsfiddle.net/chille1987/9gd7ukqh/27/

Если вы используете встроенные стили для управления цветом bg, это можно сделать с помощью некоторых Jquery.

<div class="box" style="background-color: rgba(150, 150, 150, 1);"></div>
<div class="box" style="background-color: rgba(150, 150, 150, 1);"></div>
<div class="box" style="background-color: rgba(150, 150, 150, 0);"></div>

CSS

.box {
    width: 150px;
    height: 150px;
    margin: 5px 0;
    border: 1px solid #000000;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}

.box.no-shadow {
    box-shadow: none;
}

JS

$('.box').each(function() {
    var el = $(this);
    var currentColor = $(this).css('background-color');
    var rgba = currentColor.match(/\d+/g);
    var counter = 0;

    for(var i in rgba) {
      counter++;
      var last = rgba[i];
    }

    if(counter === 4 && last == 0) {
        el.addClass('no-shadow');
    }
});

Answer 2

Можно заменить box-shadow шириной drop-shadow. Последний ничего не покажет для прозрачного div:

.box {
  display:inline-block;
  margin:5px;
  height:100px;
  width:100px;
  filter:drop-shadow(5px 5px 5px #000);
}

<div class="box"></div>
<div class="box" style="background:red;"></div>
<div class="box" style="background:blue;"></div>
<div class="box" style="background:white;"></div>
<div class="box" style="background:rgba(0,100,0,0.5);"></div>
<div class="box" style="background:rgba(0,0,0,0);"></div>

Или, как показано ниже, если вы хотите, чтобы тень была только вокруг границ:

.box {
  display:inline-block;
  margin:5px;
  height:100px;
  width:100px;
  position:relative;
}
.box::before,
.box::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
}
.box::before {
  background:inherit;
  filter:drop-shadow(5px 5px 5px #000);
}
.box::after {
  background:#fff; /* this should be equal to main background */
}

<div class="box"></div>
<div class="box" style="background:red;"></div>
<div class="box" style="background:blue;"></div>
<div class="box" style="background:white;"></div>
<div class="box" style="background:rgba(0,100,0,0.5);"></div>
<div class="box" style="background:rgba(0,100,0,0.3);"></div>
<div class="box" style="background:rgba(0,0,0,0);"></div>