我有一个带有背景图像的HTML元素,并希望在底部创建镜像效果,就像图像被这样反映一样:
对于我来说,创建这种反射的最佳解决方案是仅使用CSS,而不使用比该单个元素更多的元素,并且不使用图像URL多次(由于维护原因)。我只找到了带有“复杂” 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>
您确实可以使用伪元素,: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>
注意:您必须使用供应商前缀才能在不同的浏览器中提供支持。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句