Stack Overflow на русском Asked by Den on December 9, 2020
Есть div с шириной 100% и высотой 100vh и заданной ему фоновой картинкой в качестве background; также заданы background-size: cover и filter: grayscale(100%). Нужно расположить внутри него блок, который в занимаемом пространстве будет делать фоновую картинку цветной.
Я пробовал через псевдоэлемнты, но пока не выходит. Ай нид хэлп!
Можно добавить класс, который добавляет grayscale
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.intro {
min-height: 50vh;
position: relative;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.intro::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://picsum.photos/2000/1000) no-repeat center;
background-size: cover;
z-index: -1;
}
.intro.grayscale::before {
filter: grayscale(100%);
}
.intro__content {
padding: 10px;
font-size: 30px;
background-color: rgba(0, 0, 0, 1);
text-align: center;
}
<div class="intro grayscale">
<div class="intro__content">С grayscale</div>
</div>
<div class="intro">
<div class="intro__content">А это без grayscale</div>
</div>
Или можно использовать backdrop-filter
:
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.intro {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
color: white;
}
.intro > * {
display: flex;
justify-content: center;
align-items: center;
}
.intro::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://picsum.photos/2000/1000) no-repeat center;
background-size: cover;
z-index: -1;
}
.intro > * + * {
margin-top: 10px;
}
.intro__content {
padding: 40px 10px;
font-size: 30px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.intro .grayscale {
backdrop-filter: grayscale(100%);
}
.intro .huerotate {
backdrop-filter: hue-rotate(120deg);
}
.intro .invert {
backdrop-filter: invert(70%);
}
.intro .brightness {
backdrop-filter: brightness(60%);
}
<div class="intro">
<div class="intro__content grayscale">
grayscale 100%
</div>
<div class="intro__content huerotate">
hue-rotate 120deg
</div>
<div class="intro__content invert">
invert 70%
</div>
<div class="intro__content brightness">
brightness 60%
</div>
</div>
Answered by Михаил Камахин on December 9, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP