HTML+CSS 背景之雪碧图+渐变

最新推荐文章于 2022-12-01 12:51:29 发布

java老白菜

最新推荐文章于 2022-12-01 12:51:29 发布

阅读量234

点赞数

分类专栏：笔记文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_55970742/article/details/126386382

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一：雪碧图

雪碧图是什么？

一个页面可能会用到多个图片或者图标，如果每个图片都是一个单独的文件，则需要浏览器进行多次加载，浪费性能和带宽。

而且在某也情况下图片会延迟加载，导致用户体验不好。

将多个图片和图标放到一个图片文件上面，不仅可以一次加载，而且图片的大小会更少。

使用方法？

使用background-position属性就可以使用雪碧图，达到按需使用图片。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .A{
            width: 241px;
            height: 218px;
            background-image: url("../IMAGE/TEST.png");
        }
        .B{
            width: 241px;
            height: 218px;
            background-image: url("../IMAGE/TEST.png");
            background-position: -241px 0;
        }
    </style>
</head>
<body>
<div>
    <div class="A">

    </div>
    <div class="B">

    </div>
</div>
</body>
</html>

二：渐变

暂时用不到，先不写。

/*线性变换*/
        .C{
            width: 241px;
            height: 218px;
            background-image: linear-gradient(45grad,red 10px,blue 20px,yellow 30px);
        }
        /*径向变换*/
        .D{
            width: 241px;
            height: 218px;
            background-image: radial-gradient(at 10px 10px,red,blue);
        }

java老白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS 背景之雪碧图+渐变

一个页面可能会用到多个图片或者图标，如果每个图片都是一个单独的文件，则需要浏览器进行多次加载，浪费性能和带宽。使用background-position属性就可以使用雪碧图，达到按需使用图片。将多个图片和图标放到一个图片文件上面，不仅可以一次加载，而且图片的大小会更少。而且在某也情况下图片会延迟加载，导致用户体验不好。暂时用不到，先不写。...
复制链接

扫一扫