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

安德烈亚斯

我有一个带有背景图像的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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用CSS水平/垂直翻转/镜像图像

如何使用CSS创建图像叠加效果?

使用swift通过图像选择器选择后如何镜像图像?

我可以在单个图像或元素上使用translate3D(css)或其他CSS动画创建蝴蝶动画效果吗?

如何使用CSS创建图像滚动视差效果?

如何通过命令行镜像图像文件?

如何为头像图像创建星形?

如何创建像图像中那样的布局?

如何在图像图标上设置鼠标效果

<video>图像提要位于镜像中,如何将图像转换为非镜像图像

如何使用CSS创建运动模糊效果?

通过相机和矩阵镜像图像

如何使用Snap.svg为路径创建图像图案?

如何使用序列的单个元素创建序列?

如何使用 CSS 和 Bootstrap 在面板 div 顶部添加图像图标?

Matplotlib:如何在两个轴上镜像图像?

如何在android中对选定的图像进行不同的镜像效果

如何使用图像框架精灵套件Swift创建爆炸效果

如何使用display:flex;为不同的图像创建悬停效果?

如何使用jquery用几张图像创建电影效果?

如何使用css使用文本效果获取检测到的图像?

CSS如何使文本像图像一样缩放

如何在CSS中制作1个图像图块?

如何使用PURE CSS创建CSS3反弹效果

在R中转置图像-矩阵变换镜像图像

在图像点击 CSS 上创建涟漪效果

如何创建CSS阴影效果

如何在带有 css 的元素上使用悬停效果?

如何使用highchart将柱形图动态更改为镜像图