2021-04-21

最新推荐文章于 2024-06-14 09:24:52 发布

Sarnwan

最新推荐文章于 2024-06-14 09:24:52 发布

阅读量137

点赞数

分类专栏： CSS 文章标签： css3 css html html5

本文链接：https://blog.csdn.net/xuehaocyuyan/article/details/115935399

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

背景与渐变

背景属性
渐变
精灵图

背景属性

在这里插入代码片
<!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>
        .box1 {
            width: 200px;
            height: 200px;
            margin-bottom: 10px;
            border: 1px solid #000;
            background-color: pink;
            /* 背景图片不重复，默认值为水平竖直两方向重复 */
            background-repeat: no-repeat;
        }

        .box2 {
            width: 200px;
            height: 200px;
            margin-bottom: 10px;
            border: 1px solid #000;
            background-image: url(images/01.jpg);
            /* 注意：样式写在html里：路径为：html找图片 
                样式写在css里：路径为：css找图片*/
            background-repeat: repeat-y;
        }

        .box3 {
            width: 200px;
            height: 200px;
            margin-bottom: 10px;
            border: 1px solid #000;
            background-image: url(images/01.jpg);
            /* bgs:x y;  contain:把图片塞盒子里；cover：图片把盒子填满 auto代表等值缩放*/
            /* background-size: 50% auto; */
            /* background-size: auto 100px; */
            /* background-size: contain; */
            background-size: cover;
            background-repeat: no-repeat;
        }

        .box4 {
            width: 200px;
            height: 200px;
            border: 5px dotted #000;
            margin-bottom: 20px;
            background-image: url(images/01.jpg);
            /*bgcl,在边框是dotted dashed时才有效果 border-box默认值 padding-box:渲染到padding，不渲染边框；content-box只渲染内容区域  */
            /* background-clip: border-box; */
            /* background-clip: padding-box; */
            padding: 30px;
            background-clip: content-box;
        }

        body {
            height: 1500px;
        }

        .box5 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 20px auto;
            overflow-y: scroll;
            background-image: url(images/danjiang.jpg);
            /*bga:scroll默认值：死定在那；fixed:在网页上是活的；local:在自己的盒子里是活的 */
            /* background-attachment: fixed; */
            background-attachment: local;
            /* .box8 和body 配合使用是为了让你看清scroll local fixed到底有啥区别 */
        }

        .box6 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 20px;
            background-repeat: no-repeat;
            background-image: url(images/01.jpg);
            /*bgp: top left right bottom center px % 两两自由组合，如果只写一个，另一个缺省值为center  */
            /* background-position: center; */
            /* background-position: 100px 20%; */
            background-position: 50% center;
        }

        .box7 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin-bottom: 20px;
            /* bg:color url() bgr bgp ; 注意：no-repeat center center 用得非常多 */
            background: pink url(images/02.jpg) no-repeat center center;
        }
    </style>
</head>

<body>
    <div class="box1">背景颜色</div>
    <div class="box2">背景图片</div>
    <div class="box3">设置背景图片的尺寸</div>
    <div class="box4">背景图片的裁剪</div>
    <div class="box5">
        背景图片附着/固定
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
    </div>
    <div class="box6">背景图片在盒子里的位置</div>
    <div class="box7">背景的综合属性</div>
</body>

</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>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin: 20px;
            /* bgi:lg(方向，颜色1,...,颜色n) 方向：to top/right/left/bottom 或者写角度：0-90-180-270-360：即从下——左——上——右——下开始*/
            /* background-image: linear-gradient(0, white, lightblue 20%, rgb(231, 187, 106) 50%, rgb(218, 103, 103) 80%, yellow); */
            background-image: linear-gradient(135deg, pink, lightblue 30%, lightgreen 60%, rgb(230, 116, 214) 80%);
        }

        .box2 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            /* bgi:rg(圆心坐标，颜色1,...,颜色n) 这玩意不怎么用*/
            background-image: radial-gradient(50% 50%, pink, lightblue, lightgreen, rgb(230, 116, 214));
        }
    </style>
</head>

<body>
    <p>渐变属性bgi</p>
    <div class="box1">线性渐变</div>
    <div class="box2">径向渐变</div>
</body>

</html>

精灵图
精灵图：也就是把多个小图标放在一张图上，然后使用bgp属性单独显示其中一个。
比如下面这一张就是精灵图
在这里插入图片描述

在这里插入代码片
<!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>
        ul {
            list-style-type: none;
        }

        ul li {
            position: relative;
            padding-left: 40px;
        }

        .money {
            /* 先在背景图片中找到这张图片 */
            background-image: url(images/sprites.png);
            background-position: -68px -488px;
            width: 31px;
            height: 31px;
            /* 别忘了设置poa才能显示该小图标 */
            position: absolute;
            /* 图标在por盒子里的位置 */
            top: -4px;
            left: 0;
        }
    </style>
</head>

<body>
    <ul>
        <li><i class="money"></i> 找到$的小图标</li>
    </ul>
</body>

</html>

Sarnwan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-21

背景与渐变背景属性渐变精灵图背景属性在这里插入代码片<!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-
复制链接

扫一扫