使用linear-gradient线性渐变给图片“打光”

最新推荐文章于 2022-02-24 14:06:12 发布

bdu_zhangAo

最新推荐文章于 2022-02-24 14:06:12 发布

阅读量601

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/bdu_zhangAo/article/details/110285803

版权

线性渐变的应用——图片“打光”

css
图片显示
效果对比
完整代码

css

		.img1{
			/* 直接引入图片 */
			background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg);
			width: 500px;
			height: 351px;
		}
		.img2{
			/* 角度是65°，所以后面的三个渐变是从左下到右上沿65度方向做滤镜的。进行了3次渐变，分别是透明→透明→全白（渐变次数或者说结点的多少，会影响打光的范围哦！），实现了类似打光的效果。注意和后面的url直接用逗号连接。 */
			background: -webkit-linear-gradient(65deg, rgba(0,0,0,0), rgba(0,0,0,0), rgba(255,255,255,1)),url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg);
			width: 500px;
			height: 351px;
		}

图片显示

	<body style="background: antiquewhite;">
		<img class="img1">
		<img class="img2">
	</body>

效果对比

在这里插入图片描述

完整代码

<html>
	<head>
	<style>
		.img1{
			background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg);
			width: 500px;
			height: 351px;
		}
		.img2{
			/* 角度是65°，所以后面的三个渐变是从左下到右上沿65度方向做滤镜的。进行了3次渐变，分别是透明→透明→全白（渐变次数或者说结点的多少，会影响打光的范围哦！），实现了类似打光的效果。注意和后面的url直接用逗号连接。 */
			background: -webkit-linear-gradient(65deg, rgba(0,0,0,0), rgba(0,0,0,0), rgba(255,255,255,1)),url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg);
			width: 500px;
			height: 351px;
		}
	</style>
	</head>
	<body style="background: antiquewhite;">
		<img class="img1">
		<img class="img2">
	</body>
</html>