CSS滤镜及精灵技术

最新推荐文章于 2021-12-14 21:48:42 发布

遥岑.

最新推荐文章于 2021-12-14 21:48:42 发布

阅读量85

点赞数 3

分类专栏： CSS 笔记文章标签： css

本文链接：https://blog.csdn.net/m0_52942098/article/details/116528457

版权

笔记同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

CSS滤镜

filter 属性定义了元素（通常是 <img> ）的可视效果。
滤镜通常使用百分比，也可以使用小数表示。

任何版本的IE当前均不支持CSS3滤镜效果，较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果，但该功能已弃用

<!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>
    <style>
        /* 高斯模糊 */
        .c1 {
            width: 280px;
            height: 230px;
            -webkit-filter: blur(2px);/*适应谷歌浏览器的内核*/
            filter: blur(2px);
        }
        /* 设置图像亮度 */
        .c2 {
            width: 280px;
            height: 230px;
            -webkit-filter: brightness(200%);
            filter: brightness(200%);
        }
        /* 调整图像对比度 */
        .c3 {
            width: 280px;
            height: 230px;
            -webkit-filter: contrast(50%);
            filter: contrast(50%);
        }
        /* 设置图像阴影效果 */
        .c4 {
            width: 280px;
            height: 230px;
            -webkit-filter: drop-shadow(2px 3px 2px pink);
            filter: drop-shadow(2px 3px 2px pink);
        }
        /* 设置图像灰度 */
        .c5 {
            width: 280px;
            height: 230px;
            -webkit-filter: grayscale(40%);
            filter: grayscale(40%);
        }
        /* 反转效果 */
        .c6 {
            width: 280px;
            height: 230px;
            -webkit-filter: invert(80%);
            filter: invert(80%);
        }
        /* 设置图像透明度 */
        .c7 {
            width: 280px;
            height: 230px;
            -webkit-filter: opacity(60%);
            filter: opacity(60%);
        }
        /* 棕褐色效果 */
        .c8 {
            width: 280px;
            height: 230px;
            -webkit-filter: sepia(70%);
            filter: sepia(70%);
        }
        /* 设置图像饱和度 */
        .c9 {
            width: 280px;
            height: 230px;
            -webkit-filter: saturate(120%);
            filter: saturate(120%);
        }
    </style>
</head>
<body>
    <img class="c1" src="./images/1.jpg">
    <br>
    <img class="c2" src="./images/1.jpg">
    <br>
    <img class="c3" src="./images/1.jpg">
    <br>
    <img class="c4" src="./images/1.jpg">
    <br>
    <img class="c5" src="./images/1.jpg">
    <br>
    <img class="c6" src="./images/1.jpg">
    <br>
    <img class="c7" src="./images/1.jpg">
    <br>
    <img class="c8" src="./images/1.jpg">
    <br>
    <img class="c9" src="./images/1.jpg">
</body>
</html>

filter	描述
blur(px)	设置高斯模糊（默认值为0）
brightness(%)	设置图像亮度，0为全黑，值可以超过1（默认值为1）
contrast(%)	调整图像对比度，0为全黑，值可以超过1（默认值为1）
drop-shadow(水平偏移垂直偏移模糊阴影颜色)	设置图像阴影效果，阴影合成在图像下方
grayscale(%)	设置图像灰度，值在0-1之间（默认值为0）
invert(%)	反转效果，值在0-1之间（默认值为0图像不变）
opacity(%)	图像的透明程度，值在0-1之间（默认值为1）
sepia(%)	棕褐色效果，值在0-1之间（默认值为0）
saturate(%)	调整图像饱和度，值可以超过1（默认值为1图像不变）

CSS精灵技术（sprite）

网页图片处理方式，把零星小图片整合起来，载入速度更快（不高于200kb的图片载入时间相差不大，减少图片加载向后台服务器发送请求的次数）。
background-position 通过改变背景图片的位置，从而显示出我们想要显示出来的部分。

<!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>
    <style>
        div {
            width: 70px;
            height: 500px;
            background: url(./images/T\(4N{L_J`%`ENZKN``NVZGF.jpg) no-repeat;
        }
        .test {
            width: 16px;
            height: 19px;
            background-position: 0 -35px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="test"></div>
</body>
</html>

效果如下：
在这里插入图片描述

遥岑.

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS滤镜及精灵技术

目录CSS滤镜CSS精灵技术（sprite）CSS滤镜filter 属性定义了元素（通常是 <img> ）的可视效果。滤镜通常使用百分比，也可以使用小数表示。任何版本的IE当前均不支持CSS3滤镜效果，较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果，但该功能已弃用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
复制链接

扫一扫

专栏目录