[英]How can I make a specific div with transparent background-color over a div with black background-color
如何在具有黑色背景顏色的div上創建具有透明背景顏色的特定div?
謝謝。
我試圖使其與添加透明但沒有運氣的另一個div一起工作,我的代碼如下
.a {
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.b {
opacity: 0.7;
background-color: #000;
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.c {
opacity: 1;
position: absolute;
top: 120px;
left: 170px;
width: 100px;
height: 30px;
background-color: transparent;
}
<div class="a"><img src="http://www.helpinghomelesscats.com/images/cat1.jpg" /></div>
<div class="b"></div>
<div class="c"></div>
之前
后
這里的問題是,即使執行此操作,您只會在透明的div后面看到半黑色的div,而不會“切出”其下面的div。
那這個呢?
.a {
width: 300px;
height: 300px;
position: absolute;
cursor: none;
top: 0;
left: 0;
/*overflow hidden to contain box shadow*/
overflow: hidden;
}
.b {
position: absolute;
/*using box-shadow to create background*/
-webkit-box-shadow: 0 0 0 50000px rgba(0,0,0,0.7);
box-shadow: 0 0 0 50000px rgba(0,0,0,0.7);
/*change height and position as needed*/
width: 50px;
height: 50px;
top: 45px;
left: 75px;
z-index: 10;
}
標記將必須更改為以下內容:
<div class="a">
<img src="http://www.helpinghomelesscats.com/images/cat1.jpg" />
<div class="b"></div>
</div>
希望這可以幫助。
獎勵:使用類似以下的方法將.b附加到鼠標:
$(document).on('mousemove', function(e){
$('.b').css({
left: e.pageX -25,
top: e.pageY -25
});
});
對於JavaScript解決方案,請查看此jsFiddle: little link 。
如果代碼的任何部分含糊不清,我很樂於解釋。 請注意,我已經嘗試了一些改進HTML和CSS結構的方法-不再需要指定width
或height
。
這是代碼的注釋版本HTML:
<div class = "a">
<img src = "http://www.fox.com/glee/_ugc/images/bios/jayma-mays_small.jpg"/>
<div class = "b">
</div>
<div class = "c">
</div>
</div>
CSS:
.a {
position: relative; /*to make sure children are positioned relatively to it*/
top: 0;
left: 0;
display: inline-block;
}
.b {
opacity: 0.7;
background-color: #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; /*fill all of the parent*/
z-index: 5;
}
.c {
position: absolute;
z-index: 10;
}
JavaScript的:
function clip(x1, y1, x2, y2) {
var w = x2 - x1, h = y2 - y1; //find width and height of the clipping area
var div = document.getElementsByClassName("c")[0];
div.style.backgroundImage = "url('http://www.fox.com/glee/_ugc/images/bios/jayma-mays_small.jpg')";
div.style.backgroundPosition = (-x1) + "px " + (-y1) + "px";
div.style.width = w + "px";
div.style.height = h + "px";
div.style.top = y1 + "px";
div.style.left = x1 + "px";
}
clip(75, 75, 150, 150); //clips from 75, 75 to 150, 150, you can customize it
希望有幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.