HTML中的背景设置（下）

数据库 2023-04-06 14:15:29 阅读次数: 0

目录

一、渐变背景

1.线性渐变：linear-gradient

2.径向渐变：radial-gradient

3.重复渐变

二、滤镜

1.模糊滤镜：blur

2.亮度：brightness

3.对比度：contrast

4.饱和度：saturate

5.反转图像：invert

三、示例

一、渐变背景

1.线性渐变：linear-gradient

        线性渐变的方向默认是从上到下，但是我们可以定义从下到上、从左到右、从右到左，也可以自定义渐变角度。每个渐变至少有两种颜色节点，每种颜色节点都可以设置一个渐变标识位，渐变的区域就是相邻的两个标识位之间的区域。如果相邻的两个渐变标识位一样，那么就没有渐变效果了

2.径向渐变：radial-gradient

        径向渐变是从某一个中心开始，沿着径向的方向开始渐变。渐变的图形可以为圆形或椭圆形，中心点的位置可以自己设定。此外，我们还可以设置渐变的终点，默认是最远的一个角。我们可以设置为最近的角、最远的边以及最近的边，当然，我们可以自定义渐变的尺寸。

3.重复渐变

        如果渐变的范围不能铺满整个元素，那么我们可以设置重复渐变。

二、滤镜

1.模糊滤镜：blur

        通过模糊滤镜给图像设置高斯模糊，模糊值越大越模糊，默认是0，不模糊。当使用blur模糊时，边缘也会模糊不清，所以在使用的时候可以给图像添加一个box，设置超出盒子范围隐藏即可。

2.亮度：brightness

        亮度的取值可以使用百分比，也可以使用数字。如果亮度为0，则显示全黑；亮度为1，则正常显示。亮度大于1更亮，小于1更暗。

3.对比度：contrast

        对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，差异范围越大代表对比越大，差异范围越小代表对比越小。当对比度为0的时候，图片全黑；对比度为1时，图像正常显示。

4.饱和度：saturate

        饱和度指的是色彩的鲜艳程度,也称为色彩的纯度。当饱和度为0时，是完全不饱和；当饱和度为1时，图像正常显示。饱和度越大，色彩就会越重。

5.反转图像：invert

        反转输入图像，其值定义转换的比例。当反转值为100%时，图片完全转为灰度图像；当反转值为0时，图片正常显示。反转值得取值范围为0~100%，默认值为0。

三、示例

        下方的代码上面所写的知识点的应用实例，有兴趣的朋友可以运行一下。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            font-size: 32px;
            background-color: aqua;
        }

        div:nth-of-type(1) {
            width: 300px;
            height: 300px;
            background: linear-gradient(to right, red 20%, yellow 40% 60%, pink 80%);
        }

        div:nth-of-type(2) {
            width: 300px;
            height: 300px;
            background: linear-gradient(45deg, red 20%, yellow 40% 60%, pink 80%);
        }

        div:nth-of-type(3) {
            width: 300px;
            height: 300px;
            background: linear-gradient(to right, red 50%, pink 50%);
        }

        div:nth-of-type(4) {
            width: 1280px;
            height: 720px;
            background: linear-gradient(45deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
        }

        div:nth-of-type(5) {
            width: 600px;
            height: 300px;
            background: radial-gradient(ellipse at center center, red, green, blue);
        }

        div:nth-of-type(6) {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle at 0px 0px, red, green, blue);
        }

        div:nth-of-type(7) {
            width: 300px;
            height: 300px;
            background: radial-gradient(100px 100px at 50px 100px, red, green, blue);
        }

        div:nth-of-type(8) {
            width: 600px;
            height: 300px;
            background: repeating-linear-gradient(to right, red, green 30px 60px, blue 90px 120px);
        }

        div:nth-of-type(9) {
            width: 600px;
            height: 600px;
            background: repeating-radial-gradient(circle, red, green 30px 60px, blue 90px 120px);
        }

        div:nth-of-type(10) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            display: inline-block;
        }

        div:nth-of-type(11) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: blur(5px);
            display: inline-block;
        }

        div:nth-of-type(12) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: brightness(.5);
            display: inline-block;
        }

        div:nth-of-type(13) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: brightness(1);
            display: inline-block;
        }

        div:nth-of-type(14) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: brightness(2);
            display: inline-block;
        }

        div:nth-of-type(15) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: contrast(.5);
            display: inline-block;
        }

        div:nth-of-type(16) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: contrast(1);
            display: inline-block;
        }

        div:nth-of-type(17) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: contrast(2);
            display: inline-block;
        }

        div:nth-of-type(18) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: saturate(.5);
            display: inline-block;
        }

        div:nth-of-type(19) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: saturate(1);
            display: inline-block;
        }

        div:nth-of-type(20) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: saturate(2);
            display: inline-block;
        }

        div:nth-of-type(21) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: invert(0);
            display: inline-block;
        }

        div:nth-of-type(22) {
            width: 640px;
            height: 360px;
            background-size: 640px 360px;
            background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
            filter: invert(1);
            display: inline-block;
        }
    </style>
</head>

<body>
    <p>线性渐变</p>
    <div>
        用方向定义渐变
    </div>
    <div>
        用角度定义渐变
    </div>
    <div>
        相邻的两个渐变标识位一样，无渐变效果
    </div>
    <div>
        渐变图片背景
    </div>
    <p>径向渐变</p>
    <div>
        中心椭圆渐变(默认)
    </div>
    <div>
        左上角圆形渐变
    </div>
    <div>
        自定义渐变尺寸中心圆形渐变
    </div>
    <p>重复渐变</p>
    <div>
        重复的线性渐变
    </div>
    <div>
        重复的径向渐变
    </div>
    <p>模糊滤镜</p>
    <div></div>
    <div></div>
    <p>亮度</p>
    <div></div>
    <div></div>
    <div></div>
    <p>对比度</p>
    <div></div>
    <div></div>
    <div></div>
    <p>饱和度</p>
    <div></div>
    <div></div>
    <div></div>
    <p>反转图</p>
    <div></div>
    <div></div>
</body>

</html>

文中若有不当之处，欢迎各位朋友批评指正。

猜你喜欢

转载自blog.csdn.net/m0_52660785/article/details/125997567
今日推荐
周排行
错误：聚合‘std::ifstream inFile’类型不完全，无法被定义
Python中Django中的JS异步调用疑难杂症
使用Bind服务配置DNS服务器
关于调试中的printf的坑
04：一文初探Tensorflow高级API使用（初学者篇）
修改MySQL数据库中主键的值
Codeforces 33B. String Problem（Floyd最短路）
【8】文件的读写
报表导出之easypoi的应用
剑指Offer(Python多种思路实现):用两个栈实现队列
每日归档
更多
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)
2024-07-12(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022