Откуда берется белый фон при использовании режима смешивания?
body {
background: #060f11;
}<div style = "position:relative;z-index:0">
<div style = "background:#060f11">
<div style = "background:linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");filter:contrast(200%) brightness(1000%) invert(100%);height:200px;mix-blend-mode:multiply;position:relative;transform:rotateZ(45deg);width:200px"></div>
</div>
</div>Я не понимаю, откуда берутся белые края и как от них избавиться?
Похоже, что это вызвано z-index на родителе, но почему?
У div нет белого фона.
Вы использовали инвертирование для темных цветов. а затем повернул белый div transform: rotateZ(45deg);. Однако overflow: hidden работает нормально.
Я все еще в замешательстве. Почему удаление z-index приводит к его исчезновению? Я не думаю, что это причина.
Ответы 2
Прежде чем ответить, я прошу прощения, если комментарии показались краткими из-за отсутствия английского языка.
Откуда берется белый фон при использовании режима смешивания?
- Похоже, что приведенный выше вопрос задается вопросом, почему возникает белый цвет, поэтому я ответил на него в комментариях.
Что вызывает режим смешивания.
Извините, что цитирую другой ответ.
Я не хочу принимать.
Теперь белому цвету повернутого элемента не с чем смешиваться за пределами контекста наложения, созданного средним элементом div. Поскольку ему не с чем смешиваться, он просто выводит исходный цвет — белый.
Размер div был определен как 200 пикселей, но при его повороте размер фактического элемента меняется.
body {
background: #060f11;
}
p {
color: white;
font-weight: bold;
margin-bottom: 40px;
font-size: 2rem;
}
#with-z-index {
position: relative;
z-index: 0;
}
#with-z-index .filter-bg {
position: relative;
background: #060f11;
height: 300px;
}
#with-z-index .filter-content {
filter: contrast(200%) brightness(1000%) invert(100%);
mix-blend-mode: multiply;
position: absolute;
top: 0;
left: 0;
transform: translate(25%,25%) rotateZ(45deg);
height: 200px;
width: 200px;
}
/* if-not-filter */
#if-not-filter {
position: relative;
z-index: 0;
}
#if-not-filter .square-bg {
position: relative;
background: red;
height: 300px;
}
#if-not-filter .square {
filter: contrast(200%) brightness(1000%) invert(100%);
position: relative;
transform: translate(25%,25%) rotateZ(45deg);
width: 200px;
height: 200px;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<p>With blend mode</p>
<div id = "with-z-index" style = "">
<div class = "filter-bg">
<div class = "filter-content" style = "background:linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");"></div>
</div>
</div>
<p>Without blend mode</p>
<div id = "if-not-filter" style = "">
<div class = "square-bg">
<div class = "square" style = "background:linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), linear-gradient(270deg, rgba(0,0,0,1), rgba(0,0,0,0) 50%), url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");"></div>
</div>
</div>
</body>
</html>Вопрос, который вроде бы был и исчез по z-index
Я оставлю информацию о стекировании контекста, потому что она будет полезна другим.
Проверьте контекст стека при использовании CSS-фильтра или непрозрачности.
Чего вам никто не говорил о Z-Index_[Филип Уолтон — инженер @ Google]
Помимо непрозрачности, несколько новых свойств CSS также создают контексты стекирования. К ним относятся: преобразования, фильтры, CSS-регионы, постраничные медиафайлы и, возможно, другие.
Все еще не объясняет, почему добавление z-index приводит к появлению белого фона, тогда как без него он не появляется, т. е. я хочу избавиться от белого фона при использовании z-index.
Кажется, это сложная проблема, в которой нечего смешивать, складывая контекст. Пожалуйста, проверьте исправленный ответ :)
Ваш самый внутренний <div> повёрнут и mix-blend-mode: multiply применён. Итак, вопрос: на что оно будет умножаться? И ответ таков: все, что ниже этого значения, в том же контексте стекирования.
Как сказано в спецификации,
Затем эту группу необходимо смешать и скомпоновать с контекстом стекирования, содержащим элемент.
Итак, предположим, что вы не установили z-index для внешнего элемента. Это означает, что он может объединяться с контекстом корневого стека. Поскольку filter() превращает необычный фон вашего внутреннего элемента в белый, умножение темного фона страницы на белый (единство) дает тот же цвет, что и темный фон. Поскольку вывод имеет тот же цвет, что и фон, вы его не видите.
Но добавление z-index к родительскому элементу между вашим необычным элементом и фоном создает новый контекст наложения. (Вы можете продемонстрировать это, потому что получите тот же результат, избавившись от z-index и установив isolation: isolate для этого родителя.) Теперь белому цвету повернутого элемента не с чем смешиваться за пределами контекста наложения, созданного средним элементом div. Поскольку ему не с чем смешиваться, он просто выводит исходный цвет — белый.
Как говорили другие, способ предотвратить это - в первую очередь не дать повернутому элементу высовываться из своего родителя, установив overflow: hidden на одном из родителей.
Спасибо. Это мне очень помогло. Было приятно учиться :)
Наконец-то кто-то действительно ответил на вопрос. Очень ценю это. Многому научился!
переполнение: скрыто от родителя?