HTML – CSS“玻璃阴影”效果

概述我正在尝试实现这种阴影效果,其中阴影就像图像本身的模糊版本： 我能够通过将相同的图像堆叠两次并应用滤镜来实现它：模糊(20px)到下面的那个,但这感觉就像一种低效的方式： .cover-wrapper { position: relative; margin: 50px; width: 200px; height: 200px;}.cover { z-index: 1; 我正在尝试实现这种阴影效果,其中阴影就像图像本身的模糊版本：

我能够通过将相同的图像堆叠两次并应用滤镜来实现它：模糊(20px)到下面的那个,但这感觉就像一种低效的方式：

.cover-wrapper {  position: relative;  margin: 50px;  wIDth: 200px;  height: 200px;}.cover {  z-index: 1;  border-radius: 10px;  position: absolute;  wIDth: 200px;  height: 200px;}.cover-shadow-wrapper {  position: absolute;  filter: blur(20px);  overflow: hIDden;  height: 200px;  wIDth: 200px;}.cover-shadow {  transform: scale(1.5)}

<div >  <img src="https://picsum.photos/200/200?image=871" alt="cover" >    <div >    <img src="https://picsum.photos/200/200?image=871" alt="shadow" >  </div>    </div>

有更有效的方法吗？此外,这个效果实际上叫什么？

解决方法 它必须是图像标签吗？

你可以使用一个div和它的::在pesudo之后,给它们两个相同的背景图像和属性,然后模糊:: after,你在HTML中有一个更简单的元素

.glassy-img,.glassy-img::after {  background-image: url(https://picsum.photos/200/200?image=871);  border-radius: 10px;  background-size: cover;  background-position: center;  wIDth: 200px;  height: 200px;}.glassy-img::after {  content: '';  filter: blur(20px);  display: block;  position: relative;  z-index: -1;}

<div ></div>

总结

以上是内存溢出为你收集整理的HTML – CSS“玻璃阴影”效果全部内容，希望文章能够帮你解决HTML – CSS“玻璃阴影”效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。