修改html中的图片属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        /* blur() 函数将高斯模糊应用于输入图像。radius 定义了高斯函数的标准偏差值,或者屏幕上有多少像素相互融合,因此,较大的值将产生更多的模糊。若没有设置值,默认为0。该参数可以指定为 CSS 长度,但不接受百分比值。*/
        filter: blur(5px);
        /* 将线性乘法器应用于输入图像,使其看起来或多或少地变得明亮。值为 0% 将创建全黑图像值为 100% 会使输入保持不变。其他值是效果的线性乘数。如果值大于 100% 提供更明亮的结果。若没有设置值,默认为 1。 */
        filter: brightness(0.4);
        /* 调整输入图像的对比度。值是 0% 的话,图像会全黑。值是 100%,图像不变。值可以超过 100%,意味着会运用更低的对比。若没有设置值,默认是 1。*/
        filter: contrast(200%);
        /* 对输入图像应用阴影效果。阴影可以设置模糊度的,以特定颜色画出的遮罩图的偏移版本,最终合成在图像下面。 函数接受<shadow>(在CSS3背景中定义)类型的值,除了 inset 和 spread 关键字 */
        filter: drop-shadow(16px 16px 20px blue);
        /* 将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像,值为 0% 图像无变化。值在 0% 到 100% 之间,则是效果的线性乘数。若未设置值,默认是 0。 */
        filter: grayscale(50%);
        /* 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg,则图像无变化。若值未设置值,默认为 0deg。该值虽然没有最大值,超过 360deg 的值相当于又绕一圈。 */
        filter: hue-rotate(90deg);
        /* 反转输入图像。amount 的值定义转换的比例。100% 的价值是完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间,则是效果的线性乘数。 若值未设置值,默认为 0。 */
        filter: invert(75%);
        /* 转化图像的透明程度。amount 的值定义转换的比例。值为 0% 则是完全透明,值为 100% 则图像无变化。值在 0% 和 100% 之间,则是效果的线性乘数。也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的 opacity 属性很相似,不同之处在于通过 filter,一些浏览器为了提升性能会提供硬件加速。 */
        filter: opacity(25%);
        /* 转换图像饱和度。amount 的值定义转换的比例。值为 0% 则是完全不饱和,值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。 若未设置值,默认为 1。 */
        filter: saturate(30%);
        /* 将图像转换为深褐色。amount 的值定义转换的比例。值为 100% 则完全是深褐色的,值为 0% 图像无变化。值在 0% 到 100% 之间,值是效果的线性乘数。若未设置,值默认是 0。 */
        filter: sepia(60%);

        /* 复合函数。同事使用多个滤镜 */
        filter: contrast(175%) brightness(3%);
        /* 不使用滤镜 */
        filter: none;
    }

    .container {
        margin: 50px auto;
        height: 140px;
        width: 400px;
        /* 给融合元素的父元素设置背景色 */
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 给融合元素的父元素设置contrast */
        filter: contrast(30);
    }

    .circle {
        border-radius: 50%;
        position: absolute;
        /* 给融合元素设置blur */
        filter: blur(15px);
    }

    .circle-1 {
        height: 90px;
        width: 90px;
        background: #03a9f4;
        transform: translate(-50px);
        animation: 2s moving linear infinite alternate-reverse;
    }

    .circle-2 {
        height: 60px;
        width: 60px;
        background: #15ff00;
        transform: translate(50px);
        animation: 2s moving linear infinite alternate;
    }

    @keyframes moving {

        /* //两个元素的移动 */
        0% {
            transform: translate(50px)
        }

        100% {
            transform: translate(-50px)
        }
    }
</style>

<body>
    <div class="container">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
    </div>
    <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190214%2Fed33981873a044638a8bd45ed24bfe32.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634967244&t=eb2d4e2c09282313b334a7c68587afbb"
        alt=""> -->
</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值