2

背景色が黒の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>

http://jsfiddle.net/sJW6U/1/

前 ここに画像の説明を入力してください

後 ここに画像の説明を入力してください

4

2 に答える 2

4

ここでの問題は、これを行っても、透明な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>

http://jsfiddle.net/sJW6U/71/

お役に立てれば。

ボーナス：次のようなものを使用して、.bをマウスにアタッチします。

$(document).on('mousemove', function(e){
    $('.b').css({
       left:  e.pageX -25,
       top:   e.pageY -25
    });
});
于 2012-11-26T09:46:32.473 に答える
1

JavaScriptソリューションについては、このjsFiddle：littlelinkを確認してください。

コードの一部があいまいな場合は、喜んで説明します。HTMLとCSSの構造を少し改善しようとしたことに注意してください。swidthまたはheightsを指定する必要はもうありません。

コメント付きのコード、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

お役に立てば幸いです。

于 2012-11-26T09:52:32.840 に答える