如何使用CSS单个元素

时间:2016-10-21 16:24:13

标签: html css html5 css3 image-effects

我有一个带背景图片的HTML元素,想要在底部创建一个镜像效果,好像图像反映如下:

Image with mirror

创建此反射的最佳解决方案是CSS,不使用比单个元素更多的元素,并且不多次使用图像URL(由于维护原因)。我只找到solutions like this带有“复杂”的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>

2 个答案:

答案 0 :(得分:4)

您确实可以使用伪元素:after:before首先使用transform: scaleY(-1);镜像图像,然后使用线性渐变覆盖镜像图像,使用半透明白色rgba(255, 255, 255, 0.5)为非透明白色#fff

要不被强制两次标记图片网址,只需使用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>

注意:您必须在不同的浏览器中使用供应商前缀来支持。

答案 1 :(得分:1)

添加

transform: rotate(180deg);
-webkit-mask-image:-webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,.7)), to(rgba(0,0,0,1)));

显然,在css

中做这样的事情时,没有任何东西可以跨浏览器100%

&#13;
&#13;
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;
  transform: rotate(180deg);
  -webkit-mask-image:-webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5)));
}
&#13;
<div></div>
&#13;
&#13;
&#13;