Форум

Black_Star · #1 (**permalink**) 01.12.2016, 15:06

Добрый день уважаемые. Тут с вопросом столкнулся, может и детский, но всё же...как сделать так что б filter: grayscale(1) не наследовался дочерними элементами и потомками ?
Есть такое представление

<div class="filter">
			<div class="one"></div>
			<div class="two"></div>
	</div>

Допустим у дива с классом filter задана (фоном) картинка к которой применяется фильтр, а как сделать что б у дивов .one .two не было этого свойства, допустим там тоже картинки, но они должны уже быть без фильтра.

ksa · #2 (**permalink**) 01.12.2016, 16:00

Сообщение от Black_Star

Допустим у дива с классом filter задана (фоном) картинка к которой применяется фильтр, а как сделать что б у дивов .one .two не было этого свойства, допустим там тоже картинки, но они должны уже быть без фильтра.

Начать можно с того, что указать дочерним элементам это свойство но с "дефолтным" значением...
Т.е. не родительское.

Black_Star · #3 (**permalink**) 01.12.2016, 16:54

Сообщение от ksa

Начать можно с того, что указать дочерним элементам это свойство но с "дефолтным" значением...
Т.е. не родительское.

Эта идея меня тоже первым делом посетила, но нет...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style type="text/css">
    
.blockPhotos{
    margin: 1%;
    border: 1px solid black;
    width: 650px;
    height: 900px;
    
}


.boxPhoto{
   
    margin: 1% 2%;
    width: 600px;
    height: 859px;
*!* filter: grayscale(1); */!*
    border: 1px solid black;
    cursor: pointer;
}

.fullGate{
    position: relative;
    width: 100%;
    height: 100%;
 *!*   filter: grayscale(0); */!*
    border: 1px solid black;
}

.ph_1{
    background: url('https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/Scarlett_Johansson.jpg?raw=true') no-repeat 50% 50%;
}

.icon{
    position: absolute;
    top: 70%;
    left: 0%;
    width: 256px;
    height: 256px;
    background: url('https://raw.githubusercontent.com/BlackStar1991/Pictures-for-sharing-/master/ScarlettJohansson.png') no-repeat 50% 50%;
    filter: grayscale(1);


}
</style>
<body>

<div class="blockPhotos">
    <div class="boxPhoto ph_1">
        <div class="fullGate">
            <div class="icon"></div>
        </div>
    </div>
</div>
</body>
</html>

Ну или я Вас не правильно понимаю

ksa · #4 (**permalink**) 02.12.2016, 08:50

Сообщение от Black_Star

Эта идея меня тоже первым делом посетила, но нет...

Тогда нужно "выводить" детей из этого родителя.
Т.е. делать "контейнер" для первого и дочерних элементов. Потом как-то их там позиционировать...

ksa · #5 (**permalink**) 02.12.2016, 09:01

Типа такого...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style type="text/css">
    
.blockPhotos{
    margin: 1%;
    border: 1px solid black;
    width: 650px;
    height: 900px;
   
}
.boxPhoto{
    margin: 1% 2%;
    width: 600px;
    height: 859px;
filter: grayscale(1);
    border: 1px solid black;
    cursor: pointer;
}
.fullGate{
    position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
 filter: grayscale(0);
    border: 1px solid black;
}
.ph_1{
    background: url('https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/Scarlett_Johansson.jpg?raw=true') no-repeat 50% 50%;
}
.icon{
    position: absolute;
    top: 70%;
    left: 0%;
    width: 256px;
    height: 256px;
    background: url('https://raw.githubusercontent.com/BlackStar1991/Pictures-for-sharing-/master/ScarlettJohansson.png') no-repeat 50% 50%;
    filter: grayscale(1);
}
.container {
	position: relative;
	border: 1px solid red;
}
</style>
<body>

<div class="blockPhotos">
    <div class="container">
		<div class="boxPhoto ph_1">
		</div>
		<div class="fullGate">
			<div class="icon"></div>
		</div>
    </div>
</div>
</body>
</html>

С отступами нужно будет поработать...

Black_Star · #6 (**permalink**) 02.12.2016, 12:10

Сообщение от ksa

С отступами нужно будет поработать...

Сдается мне мы с Вами друг друга не понимаем.

когда я говорил про то что б фильтр не применялся к детям, я имел ввиду что б <div class="icon"></div> был с свойством filter: grayscale(0); (иначе говоря что б маленькая Скарлетт была цветной

) А так как вы предлагаете, тут конечно вопросов нет...но это не то

ksa · #7 (**permalink**) 02.12.2016, 14:10

Сообщение от Black_Star

но это не то

Malleys · #8 (**permalink**) 12.12.2016, 18:38

Для достижения того же самого эффекта можно использовать background-blend-mode

Чёрный фон + цветная фоновая картинка и режим наложения luminosity...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    
.blockPhotos{
    margin: 1%;
    border: 1px solid;
    width: 650px;
    height: 900px;
}


.boxPhoto{
    margin: 1% 2%;
    width: 600px;
    height: 859px;
    border: 1px solid;
    cursor: pointer;
}

.fullGate{
    position: relative;
    width: 100%;
    height: 100%;
    outline: 1px solid;
}

.ph_1{
    background: url('https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/Scarlett_Johansson.jpg?raw=true') no-repeat 50% 50%, black;
    background-blend-mode: luminosity;
}

.icon{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 256px;
    height: 256px;
    background: url('https://raw.githubusercontent.com/BlackStar1991/Pictures-for-sharing-/master/ScarlettJohansson.png') no-repeat 50% 50%;
}
    </style>
</head>
<body>

<div class="blockPhotos">
    <div class="boxPhoto ph_1">
        <div class="fullGate">
            <div class="icon"></div>
        </div>
    </div>
</div>
</body>
</html>

Поддержка браузерами http://caniuse.com/#search=background-blend-mode

Форум

Справочник

Discord чат

Курсы javascript