Установка яркости фильтра родителя без влияния на дочерний элемент

Question

Установка яркости фильтра родителя без влияния на дочерний элемент

1

Есть ли способ добиться эффекта настройки filter: brightness() CSS filter: brightness() для элемента без его влияния на конкретные/все (не имеет значения) дочерние элементы?

Рассмотрим следующий пример:

function setBrightness (bright) {
  $('.icon').css('filter', 'brightness(${bright})');
  // None of these work:
  // $('.indicator').css('filter', '');
  // $('.indicator').css('filter', 'brightness(1.0)');
  // $('.indicator').css('filter', 'brightness(${1.0/bright})');
}

window.setInterval(function () {
  let ms = new Date().getTime();
  let bright = Math.cos(2.0 * 3.14 * ms / 3000.0) + 1.0;
  setBrightness(bright);
}, 50);

#bar {
  background: #222;
  font-size: 0;
}

.icon {
  background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3);
  width: 36px;
  height: 34px;
  display: table-cell;
  text-align: center;
  /* normally middle but set to top to not obscure background for this example: */
  vertical-align: top; 
}

.icon1 {
  background-position: -141px -54px;
}

.icon2 {
  background-position: -220px -54px;
}

.indicator {
  border-radius: 2px;
  color: white;
  display: inline-block;
  font-family: sans-serif;
  font-size: 8pt;
  width: 50%;
}

.icon1 .indicator {
  background: #a00;
}

.icon2 .indicator {
  background: #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="bar">
    <div class="icon icon1">
    <span class="indicator">3</span>
    </div>
    <div class="icon icon2">
      <span class="indicator">10</span>
    </div>
  </div>
</body>

Здесь у меня есть span внутри div (icon класса), и я устанавливаю яркость фильтра на div так:

$('.icon').css('filter', 'brightness(${bright})');

Однако мне бы хотелось, чтобы это повлияло только на этот фон и не повлияло на небольшой "индикаторный" span. То есть в приведенном выше фрагменте значок должен быть пульсирующим, но индикаторы переднего плана и их красно-зеленые фоны должны оставаться неизменными. Единственное, что я думал о попытке провалиться:

function setBrightness (bright) {
  $('.icon').css('filter', 'brightness(${bright})');
  // None of these work:
  // $('.indicator').css('filter', '');
  // $('.indicator').css('filter', 'brightness(1.0)');
  // $('.indicator').css('filter', 'brightness(${1.0/bright})');
}

Кроме того, важно, чтобы я не вносил изменений в следующее:

Невозможно изменить background-* CSS.
Невозможно изменить структуру HTML, span должен оставаться дочерним элементом div.

Кстати, на самом деле мне не нужно решение, которое, кстати, опускает все дочерние элементы. Мне нужен только один данный ребенок (те span), который не затрагивается, поскольку структура, с которой я работаю, не имеет нескольких дочерних div под каждым div; пример является представительным. Не уверен, если это имеет значение.

Есть ли способ сделать это?

Jason C 04 июнь 2017, в 19:27

Источник

Теги:

javascript

css

css-filters

1 ответ

Ещё вопросы

WizardCoder · Accepted Answer · 2017-06-04T14-14-00.000Z

Изменение непрозрачности родительского элемента всегда будет изменять непрозрачность дочернего элемента. К сожалению, этого не происходит. Однако вы можете изменить структуру HTML и абсолютное положение элементов друг над другом, а затем ориентировать только те элементы, которые хотите угасать.

$(document).ready(function(){
  function setBrightness (bright) {
  $('.icon').css('filter', 'brightness(${bright})');
}

window.setInterval(function () {
  let ms = new Date().getTime();
  let bright = Math.cos(2.0 * 3.14 * ms / 3000.0) + 1.0;
    setBrightness(bright);
  }, 50);
});

#bar {
		background: #222;
		font-size: 0;
	}

	.icon {
		background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3);
		width: 36px;
		height: 34px;
		display: inline-block;
		position: absolute;
		top:0;
		left: 0;
	}

	.icon-wrap {
		width: 36px;
		height: 34px;
		text-align: center;
		position: relative;
		display: table-cell;
		/* normally middle but set to top to not obscure background for this example: */
	}

	.icon1 .icon {
		background-position: -141px -54px;
	}

	.icon2 .icon {
		background-position: -220px -54px;
	}

	.indicator {
		border-radius: 2px;
		color: white;
		font-family: sans-serif;
		font-size: 8pt;
		width: 18px;
		height: 14px;
		position: absolute;
		top:0;
		left:50%;
		margin-left: -9px;
	}

	.icon1 .indicator {
		background: #a00;
	}

	.icon2 .indicator {
		background: #0f0;
	}

<div id="bar">
  <div class="icon1 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">3</span>
  </div>
  <div class="icon2 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">10</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Это также возможно сделать с ключевыми кадрами CSS3:

#bar {
  background: #222;
  font-size: 0;
}

.icon {
  background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3);
  width: 36px;
  height: 34px;
  display: inline-block;
  position: absolute;
  top:0;
  left: 0;
  -webkit-filter: grayscale(200%); /* Safari 6.0 - 9.0 */
  filter: grayscale(200%);
}

.icon-wrap {
  width: 36px;
  height: 34px;
  text-align: center;
  position: relative;
  display: table-cell;
  /* normally middle but set to top to not obscure background for this example: */
}

.icon1 .icon {
  background-position: -141px -54px;
}

.icon2 .icon {
  background-position: -220px -54px;
}

.indicator {
  border-radius: 2px;
  color: white;
  font-family: sans-serif;
  font-size: 8pt;
  width: 18px;
  height: 14px;
  position: absolute;
  top:0;
  left:50%;
  margin-left: -9px;
}

.icon1 .indicator {
  background: #a00;
}

.icon2 .indicator {
  background: #0f0;
}

@keyframes fader {
  0%   {
    -webkit-filter: grayscale(200%); /* Safari 6.0 - 9.0 */
    filter: grayscale(200%);
  }
  50%  {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
  }
  100% { opacity:1;
    -webkit-filter: grayscale(200%); /* Safari 6.0 - 9.0 */
    filter: grayscale(200%);
  }
}
@-o-keyframes fader {
  0%   {
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
 50%  {
   -webkit-filter: brightness(0%); /* Safari 6.0 - 9.0 */
   filter: brightness(0%);
 }
 100% { opacity:1;
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
}
@-moz-keyframes fader {
  0%   {
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
 50%  {
   -webkit-filter: brightness(0%); /* Safari 6.0 - 9.0 */
   filter: brightness(0%);
 }
 100% { opacity:1;
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
}
@-webkit-keyframes fader {
  0%   {
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
 50%  {
   -webkit-filter: brightness(0%); /* Safari 6.0 - 9.0 */
   filter: brightness(0%);
 }
 100% { opacity:1;
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
}
.icon {
   -webkit-animation: fader 3s infinite ease-in;
   -moz-animation: fader 3s infinite ease-in;
   -o-animation: fader 3s infinite ease-in;
   animation: fader 3s infinite ease-in;
}

<div id="bar">
  <div class="icon1 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">3</span>
  </div>
  <div class="icon2 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">10</span>
  </div>
</div>

Черт, я действительно надеялся, что мне не придется перемещать структуру, так как я не имею контроля над самим HTML, но я полагаю, что им достаточно легко манипулировать, мне просто нужно убедиться, что он не сломает никаких селекторов в других CSS или JS где угодно (это для этого ). Я собираюсь подождать некоторое время, прежде чем принять это, чтобы увидеть, появляются ли какие-либо другие трюки. Кстати, это может не иметь значения, но это скорее filter , чем opacity .
Я сделал некоторые изменения в CSS, но не в JS. Возможно, было бы неплохо переключить его на непрозрачность, поскольку он не поддерживается ни одной версией, кроме Internet Explorer, кроме нового Microsoft Edge.