Выборочно скрывать элементы фона при наложении на прозрачный div

Question

У меня есть прозрачные элементы и некоторые полупрозрачные элементы на узорном фоне.

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

========== =========== =========== =========== 
    |  | |   | |   | |   | 
----|--------|---|   |---|---------|---|---------|--- 
----|--------|---|---------|---|---------|---|---------|--- 
    |  | |   | |   | |   | 
    ========== =========== =========== =========== 

Я приведу пример codepen ниже. Я хотел бы спрятать строку с классом «случайная строка» (и не скрывать строку с классом «other-random-line»!) За div под названием «Object 2». Есть ли у кого-нибудь идеи о том, как я могу это сделать, или это вообще возможно?

http://codepen.io/anon/pen/GgzeGP

Спасибо!

Answer 1

Поскольку вы не просили избежать решения JS/jQuery, вот какой способ (который может быть уточнен для лучшего результата).

---

1 - я создал маску, содержащую ваш дублированный фон:

HTML

<div class="maskContainer"> 
    <div class="mask"> 
    <div class="background"></div> 
    </div> 
</div> 

CSS

.background { 
    position: absolute; 
    display: inline-block; 
    background: repeating-linear-gradient(
     45deg, 
     rgba(0, 0, 0, 0.2), 
     rgba(0, 0, 0, 0.2) 10px, 
     rgba(0, 0, 0, 0.3) 10px, 
     rgba(0, 0, 0, 0.3) 20px 
    ); 
    top:0px; 
} 
.maskContainer{ 
    z-index: 2; 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
} 
.mask{ 
    position:relative; 
    top:200px; 
    overflow:hidden; 
    padding: 2em; 
    border: 1px solid #afa; 
    margin: 0 1em; 
} 

JS

var containerWidth = $(".container").width(); 
var containerHeight = $(".container").height(); 

$(".background").css({ 
    'width':containerWidth+'px', 
    'height':containerHeight+'px', 
}); 

---

2 - Эта маска получает размер и положение нужного объекта с JQuery (и некоторые другие материалы, чтобы иметь дело с объектом заполнения/края):

JS

var selectedObjWidth = $(".object.selected").width(); 
var selectedObjHeight = $(".object.selected").height(); 
var selectedObjPosX = $(".object.selected").position().left; 
var selectedObjPosY = $(".object.selected").position().top; 

$(".mask").css({ 
    'width':selectedObjWidth+'px', 
    'height':selectedObjHeight+'px', 
    'left':selectedObjPosX+'px', 
    'top':selectedObjPosY+'px' 
}); 


var maskMargin = $(".mask").css("margin-left"); 
maskMargin = maskMargin.split("px"); 
var realMaskMargin = maskMargin[0]; 

var maskPosX = $(".mask").position().left+parseInt(realMaskMargin)+1; 

$(".background").css({ 
    'left':'-'+maskPosX+'px' 
}); 

---

Реферат:

Маска занимает позицию вашего объекта, скрывает ее с помощью дубликата фона вашего контейнера (который переведен влево, чтобы сохранить ту же позицию как ваш исходный фон).

EG:

• Объект 150px оставил

• Маска 150px осталось слишком

• фона также 150px влево, потому что он находится в маске, и я хочу, чтобы это было выровненный с основным контейнером, поэтому я прошу, чтобы он остался на -150 пикселей. Таким образом, маска пытается воспроизвести исходный фон, переопределяя его.

• Теперь мы можем играть с г-индекса, чтобы скрыть/показать конкретные случайные линии

---

Вот ваш updated Codepen

Answer 2

Вы можете получить работу (до некоторой степени) на большинстве современные браузеры, кроме IE.

Трюк заключается не в использовании прозрачности, а в смешении. Когда вы устанавливаете режим смешивания hard-light, цвет серый в результатах наложения как прозрачный.

В следующей демонстрации это просто z-индекс элементов test3, который делает разницу.

.test1 { 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t border: solid 1px black; 
 
\t background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px); 
 
\t background-color: white; 
 
} 
 

 
.base { 
 
\t position: absolute; 
 
\t z-index: 1; 
 
\t mix-blend-mode: hard-light; 
 
} 
 

 
.test2 { 
 
\t width: 200px; 
 
\t height: 100px; 
 
\t top: 50px; 
 
\t border: solid 1px red; \t 
 
\t position: absolute; 
 
\t background-color: gray; 
 
\t z-index: 10; 
 
} 
 

 
.test3 { 
 
\t width: 40px; 
 
\t height: 200px; 
 
\t top: 0px; 
 
\t border: solid 1px blue; \t 
 
\t position: absolute; 
 
\t mix-blend-mode: hard-light; 
 
\t background-color: rgba(255,0,0,0.5); 
 
} 
 

 
#test31 { 
 
\t left: 50px; 
 
\t z-index: 15; 
 
} 
 
#test32 { 
 
\t left: 120px; 
 
\t z-index: 5; 
 
}

<div class="test1"> 
 
\t <div class="base"> 
 
\t \t <div class="test2"> 
 
\t \t </div> 
 
\t \t <div class="test3" id="test31"> 
 
\t \t </div> 
 
\t \t <div class="test3" id="test32"> 
 
\t \t </div> 
 
\t </div> 
 
</div>