5

次のマークアップがあります

<body>
   <div class="holder">
      <div class="circle"></div>
   </div>
</body>

body要素に固定背景を適用し、クラスホルダーに白い背景を適用しました

body {
    background: url(image.png);
    background-attachment: fixed;
}

.holder {
    width: 500px;
    height: 500px;
    background: #fff;
}
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0);
}

私がやろうとしたことは、円を透明にして体の背景を見ることです。簡単に言えば、私がしようとしているのは、円の周りの白い背景がまだ存在している間に、円を透明にして体の背景画像を見ることです。私の英語を許してください。みんな私を助けてください。

4

4 に答える 4

9

あなたが求めていることは、透明性を使用しても機能しません。

ただし、非常に許容できる回避策があります。

body {
    background: url(http://placekitten.com/g/400/500);
    background-attachment: fixed;
}
.holder {
    width: 500px;
    height: 700px;
    background: rgba(255,255,255,0.8);
    border: 1px dotted blue;
}
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url(http://placekitten.com/g/400/500);
    background-attachment: fixed;
}

次のデモを参照してください: http://jsfiddle.net/audetwebdesign/FqMXz/

同じ背景画像を.circlediv に適用するだけです。

このトリックは、Eric Meyer による CSS の本の 1 つから取られています。

于 2013-06-07T15:12:34.010 に答える
2

の 4 番目の数値rgba()はアルファ透明度です。完全に透明な 0 に設定しました。1 は完全に不透明になります。これを 0 から 1 の間の値に設定する必要があります。

つまり、穴の効果を作成しようとしている場合は、白で透明な円が切り取られた背景画像を作成し、それを背景にする必要があります.holder。完全に不透明な.circle場合は、どれだけ透明にしても問題ありません。.holder

于 2013-06-07T15:07:35.660 に答える