【css】图片的内容阴影处理

这个是基本效果，阴影和图片内容有关。

其他图片的效果

根据需求删减代码，这里我做了一个简单的动画效果。

外面的box是为了让动画更阴影同步。

如果用倒影会导致镜像的周围模糊被切割。

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {
background-color: #c8bbea;padding: 0;margin: 0;}.row {width: 100%;padding-top: 200px;}.box {display: block;width: 200px;margin: 0 auto;transition: all .3s ease-in;position: relative;}.text{position: absolute;width: 100%;text-align: center;margin: 0 auto;font-size: 40px;font-weight: 100;top:320px;color: transparent;-webkit-background-clip: text;-webkit-text-fill-color:transparent;background-image: linear-gradient(#340e9f, #c066ce);z-index: -2;}.box:hover {transform: translateY(-100px);/*transform: rotateX(78deg);*/transition: all .3s ease-in;}.avatar {height: 200px;width: 200px;border-radius: 50%;position: relative;background: url("https://scpic.chinaz.net/files/pic/pic9/202010/apic28717.jpg") no-repeat center center;background-size: 100% 100%;display: block;}.avatar::after {content: '';backdrop-filter: blur(10px);position: absolute;display: block;top: -10%;left: -10%;width: 120%;height: 120%;border-radius: 50%;z-index: -1;background: inherit;background-size: 100% 100%;filter: blur(20px) ;/*  brightness(110%) opacity(.8)*/}</style>
</head>
<body>
<div class="row"><div class="box"><div class="avatar"></div></div><div class="text">KatyLight</div>
</div>
</body>
</html>

【css】图片的内容阴影处理相关推荐

Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
css背景图不失真_CSS实现页面背景图片模糊内容不模糊的方法
CSS实现页面背景图片模糊内容不模糊的方法,如果对你有帮助就看看吧,挺实用的一个CSS背景模糊效果,适合做一些非常唯美的网页,给人一种很模糊却又带着一丝清晰的感觉. 代码: Document .ban ...
html中图片阴影怎么写,css怎么在图片上加阴影？
css怎么在图片上加阴影?下面本篇文章给大家介绍一下使用CSS在图片上加阴影的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 方法1:设置box-shadow属性 box-sh ...
php背景图片透明度,css实现背景图片半透明内容不透明代码分享
本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的 ...
css设置图标居左_CSS text-align图片文字内容居左居右居中
CSS text-align之CSS居中(text-align:center).CSS内容居左(text-align:left).CSS文字居右(text-align:right)样式属性篇,图片.文 ...
css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例
上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明内容不透明最常见的做法事设置元素的opacity,这种设置 ...
CSS图片阴影+鼠标移上图片放大、变形
在做图片卡片列表的时候我们经常用到图片的呼吸灯效果,实现图片的阴影效果.放大.动态展示代码: li img { display: block; width: 140px; height: 140px ...
关于CSS的学习内容三
关于CSS的学习内容三 35.HTML5发展史 36.HTML5的浏览器兼容 37.HTML5语法 38.HTML新增语义化标签 39.Video和audio的应用 40.HTML5智能表单----- ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

【css】图片的内容阴影处理

【css】图片的内容阴影处理相关推荐

最新文章

热门文章