html怎么让图片变亮


本文摘自PHP中文网,作者青灯夜游,侵删。

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!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>

效果图:

阅读剩余部分

相关阅读 >>

Html的含义是什么

什么是Html文件?Html格式如何打开?(图)

什么是Html元素?浅谈元素的语法规则

Html中position用法介绍

Html hr是什么意思

Html怎么进行页面跳转(重定向)

Html基础面试题汇总

Html5中table的意思是什么

Html如何插入视频

Html中怎么删除节点

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...