Html 如何使用CSS单元素创建镜像图像效果

我有一个带有背景图像的HTML元素，希望在底部创建镜像效果，好像图像是这样反射的：

对于我来说，创建这个反射的最佳解决方案将是CSS，而不使用比这个反射更多的元素，也不多次使用图像URL（由于维护原因）。我只找到了“复杂”的HTML标记

这是我的代码：

div{
位置：相对位置；
背景：url(https://i.stack.imgur.com/P56gr.jpg);
宽度：300px；
高度：200px；
}
部门：之后{
内容：“；
位置：绝对位置；
背景：url(https://i.stack.imgur.com/P56gr.jpg);
显示：块；
宽度：300px；
高度：200px；
底部：-210px；
}

---

您确实可以使用伪元素

：after

和

：before

使用

transform:scaleY（-1）首先镜像图像

和second覆盖镜像图像，线性渐变从半透明的白色

rgba（255，255，255，0.5）

到不透明的白色

#fff

为了不被强迫两次标记图像URL，只需使用

background:inherit


div{
位置：相对位置；
背景：url(https://i.stack.imgur.com/P56gr.jpg)底部；
宽度：300px；
高度：200px；
}
部门：之后，
部门：以前{
内容：“；
位置：绝对位置；
显示：块；
宽度：继承；
身高：50%；
底部-52%；
}
部门：之后{
背景：继承；
变换：scaleY（-1）；
}
部门：以前{
z指数：1；
背景：线性梯度（至底部，rgba（255，255，255，0.5），#fff）；
}
只需添加

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%跨浏览器的


div{
位置：相对位置；
背景：url(https://i.stack.imgur.com/P56gr.jpg);
宽度：300px；
高度：200px；
}
部门：之后{
内容：“；
位置：绝对位置；
背景：url(https://i.stack.imgur.com/P56gr.jpg);
显示：块；
宽度：300px；
高度：200px；
底部：-210px；
变换：旋转（180度）；
-webkit遮罩图像：-webkit渐变（线性，左50%，左下，从（rgba（0,0,0,0）），到（rgba（0,0,0,5））；
}
有点类似（与文本类似）-感谢您的提示！Andreas answer可能有更多的供应商支持。遮罩图像不被广泛支持，但当它被支持时，您的支持率为95%。这不会沿水平轴添加镜像。注意水中的曲线是如何走错方向的。你想用rotateX（180度）代替rotate（180度）。接球不错。我甚至没有注意到。