首页 >web前端 >前端问答 > 正文

html怎么让图片变亮

原创2021-06-08 15:31:560946

在html中,可以通过filter属性来让图片变亮,只需要给图片元素添加“filter:brightness(%值)”样式即可。filter属性设置brightness()函数可调整图像的亮度,当该函数的值超过“100%”时,会让图片更亮。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在html中,可以通过filter属性来让图片变亮。下面我们通过示例来了解一下实现方法:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			.img1 {
				-webkit-filter: brightness(50%);
				/* Chrome, Safari, Opera */
				filter: brightness(50%);
			}
			.img2 {
				-webkit-filter: brightness(120%);
				/* Chrome, Safari, Opera */
				filter: brightness(120%);
			}
		</style>
	</head>

	<body>
		<p>原图:</p>
		<img src="img/1.jpg" alt="Pineapple" width="300">
		<p>filter属性控制图片的亮度:</p>

		<img class="img1" src="img/1.jpg" alt="Pineapple" width="300">
		<img class="img2" src="img/1.jpg" alt="Pineapple" width="300">


	</body>

</html>

效果图:

1.png

说明:

filter 属性定义了元素的可视效果(例如:模糊与饱和度)。

brightness(%)函数可调整图像的亮度,会给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。

(学习视频分享:css视频教程

以上就是html怎么让图片变亮的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:html 图片变亮
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    推荐视频教程
  • 从零开始构建HTML页面从零开始构建HTML页面
  • HTML前端基础第六部HTML前端基础第六部
  • HTML 中文开发手册HTML 中文开发手册
  • html5开发实战之百度外卖手机站前端制作html5开发实战之百度外卖手机站前端制作
  • 新独孤九贱之:HTML5极速入坑新独孤九贱之:HTML5极速入坑
  • 视频教程分类