7

私の問題の全体像をあなたに伝えようとしています。div私のページに、 のオーバーレイがあるz-index: 99;としbackground-color: rgba(0,0,0,0.5)ます。次に、オーバーレイの一部を削除したいと思います。divたとえば100 x 100px、top: 50px;とleft: 200px;。

削除するとは、オーバーレイの一部を除外divしてその部分を表示し、background-colorそこから を削除することを意味します。

どうやってやるの？

4

2 に答える 2

3

あなたが説明したように背景の一部を削除できるかどうかはわかりません。div代わりに、オーバーレイの背景を透明にすることができ、必要な穴の周りにフレームを形成する4 つの青っぽい背景を含めることができます。

これを行うコードを次に示します。

body {margin: 0; padding: 0}
#main {width: 500px; height: 200px; background: yellow;}
.overlay {background: rgba(0,0,0,0.5); position:absolute;}
#overlay-container { width: 500px; height: 200px; z-index: 99; position: absolute;}
#top {width: 100%; height: 50px}
#left {top:50px; width: 200px; height: 100px}
#right {left: 300px; width: 200px; height: 100px}
#bottom {left: -300px; top: 100px; width: 500px; height: 50px}
<div id="main"/>
<div id="overlay-container">
    <div class="overlay" id="top"/>
    <div class="overlay" id="left"/>
    <div class="overlay" id="right"/>
    <div class="overlay" id="bottom"/>
</div>

おそらく、 を取り除き、overlay-container物事を少し単純化することができます。

オーバーレイの場合<div>、透明な背景と半透明の境界線を持つ を使用できます。別の例を次に示します。

body { margin: 0; padding: 0; }
#background {
    width:500px;
    height:200px;
    background: yellow;
}
#overlay {
    border-color: rgba(0,0,0,0.5);
    border-style: solid;
    border-top-width: 50px;
    border-left-width: 200px;
    border-right-width: 200px;
    border-bottom-width: 50px;
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    z-index: 99;
}
<body>
    <div id="background">some content</div>
    <div id="overlay"></div>
</body>

于 2013-03-10T07:01:13.430 に答える
0

テッドの例のように何かをしなければなりません。JavaScript を使用してマスクする要素の四角形を計算し、その情報を使用してオーバーレイ要素を配置できます。

を使用した簡単な例を次に示しますjQuery。

フィドル

別の方法は、clearRect メソッドで html キャンバスを使用することです。

フィドル

キャンバスソリューションの注意点は、キャンバスが要素の上にオーバーレイされているため、たとえば. divなどのコンテンツをマウスで選択します。

于 2013-03-10T11:57:24.337 に答える