3

背景画像を持つ HTML 要素があり、画像が次のように反映されているかのように、下部にミラー効果を作成したいと考えています。

鏡のあるイメージ

このリフレクションを作成するための最適な解決策は、この単一の要素よりも多くの要素を使用せず、画像 URL を複数回使用しない (メンテナンス上の理由による) CSS のみです。このような解決策は、「複雑な」HTML マークアップでしか見つかりませんでした。

これは私のコードです：

div {
  position: relative;
  background: url(https://i.stack.imgur.com/P56gr.jpg);
  width: 300px;
  height: 200px;
}
div:after {
  content: "";
  position: absolute;
  background: url(https://i.stack.imgur.com/P56gr.jpg);
  display: block;
  width: 300px;
  height: 200px;
  bottom: -210px;
}
<div></div>

4

2 に答える 2

9

実際に疑似要素:afterを使用:beforeして、最初に を使用して画像をミラーtransform: scaleY(-1);化し、次に半透明の白rgba(255, 255, 255, 0.5)から不透明な白への線形グラデーションでミラーリングされた画像をオーバーレイすることができ#fffます。

画像の URL を 2 回表記する必要がないようにするには、単にbackground: inherit;.

div {
  position: relative;
  background: url(https://i.stack.imgur.com/P56gr.jpg) bottom;
  width: 300px;
  height: 200px;
}
div:after,
div:before {
  content: "";
  position: absolute;
  display: block;
  width: inherit;
  height: 50%;
  bottom: -52%;
}
div:after {
  background: inherit;
  transform: scaleY(-1);
}
div:before {
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);
}
<div></div>

注: さまざまなブラウザーでサポートするには、ベンダー プレフィックスを使用する必要があります。

于 2016-10-21T16:25:53.937 に答える