3

これは私が得たものの多かれ少なかれ縮小版ですが、私が望むものではありません.緑のdivを部分的に透明にしたいので、これらのdivの両方の背後にあるコンテンツを見ることができます(例にはありませんが、私のプロジェクトにはあります）。しかし、他のdivが私のビューをブロックしているので、そのdivの一部を「切り取る」にはどうすればよいですか?

考えただけで、これを解決するためのより良い方法さえあるかもしれません。

リンクが壊れている場合に備えて：

HTML:

<div id="foregrounddiv2"></div>
<div id="foregrounddiv"></div>​

CSS:

#foregrounddiv2 {
  background-color:grey;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index:2;
}
#foregrounddiv {
  background-color: green;  
  position: fixed;
  z-index: 3;  
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

更新:誤解して申し訳ありません。私が話していたテキストは、両方の div の後ろにあります。ネーミングも悪くてすみません。div を不透明にしたくありません。#foregrounddiv2コンテンツを透かして見たいだけです#foregrounddiv。私が理にかなっていることを願っています。

4

5 に答える 5

1

divに穴を開ける方法は他にもあると思います。

divの非常に広い境界線を定義すると、「穴」ができます

このように： http://jsfiddle.net/chanjarster/pG9Uy

于 2012-10-06T09:41:40.610 に答える
1

このソリューションは、すべてのブラウザーで機能するわけではありません (IE は現在、クリップパスをサポートしていません)。

ここで使用中を見ることができます

（これはレイヤーを示す別のバージョンです）

clip-path を使用して div (この場合は灰色の div) から穴を切り取り、透明な div を表示し、透明な div の下にテキストを表示します。

カットアウトを作成する主なコードは次のとおりです。

#test {
  -webkit-clip-path: polygon(
    0 0,
    70px 0,
    70px 150px,
    150px 150px,
    150px 70px,
    70px 70px,
    70px 0,
    200px 0,
    200px 200px,
    0 200px,
    0 0
  );
  clip-path: polygon(
    0 0,
    70px 0,
    70px 150px,
    150px 150px,
    150px 70px,
    70px 70px,
    70px 0,
    200px 0,
    200px 200px,
    0 200px,
    0 0
  );

  height: 200px;
  width: 200px;
  background-color:red;
  position:absolute;
  left: 0;
  right: 0;
}

練習用紙と方​​眼紙、またはクリップパス ツールを使用して、任意の形状を作成できます。

カスタムポリゴン ツールを使用した私のアート スキルの低さの例。

于 2013-11-05T19:56:54.120 に答える
1

あなたが欲しいのは灰色のdivの穴で、その穴は緑のdivの位置にありますか?

その場合、それを直接行うことはできません。4 つの灰色の div を作成し、それらの位置を調整して、画面に穴を「残す」必要があります。

于 2012-10-06T09:03:01.813 に答える
0

あなたが話していることは、クリッピングのようには聞こえませんが、不透明度のように聞こえます。

opacity: 0.5;プロパティをスタイルルールに追加するだけで#foregroundうまくいきます。

于 2012-10-06T06:04:24.697 に答える
0

あなたの質問は明確ではありませんが、私はあなたが探していると思いますopacity

ここにデモがありますhttp://jsfiddle.net/TarQq/3/

それがあなたを助けることを願っています。

于 2012-10-06T06:07:07.497 に答える