CSS图片倒影效果

关键因素XFactor

已于 2023-08-16 14:49:01 修改

阅读量520

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 前端 html

于 2023-01-04 11:01:48 首次发布

本文链接：https://blog.csdn.net/weixin_52923266/article/details/128544580

CSS 专栏收录该内容

11 篇文章

订阅专栏

文章展示了如何通过一行SCSS代码在HTML中的图像下方创建底部渐变反射效果，利用透明度从0%到100%的过渡实现视觉上的图像反射，此技术基于CSS3的渐变功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看一下效果图

废话不多说直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style lang="scss">
			img {
				-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, 
				transparent 40%, transparent 100%);
			}
		</style>
	</head>
	<body>
		<img src="img/1.JPEG" alt="">
	</body>
</html>

完事!其实很简单就是运用了渐变的原理。