HTML 学习记录（十二）

最新推荐文章于 2024-06-02 12:54:29 发布

xiao_wang98

最新推荐文章于 2024-06-02 12:54:29 发布

阅读量317

点赞数

分类专栏：笔记文章标签： html 学习 css

本文链接：https://blog.csdn.net/little_w98biubiu/article/details/124846500

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

背景

background-color:背景颜色

background-image:背景图片

        可以同时设置，背景色会成为底色，图片小时会平铺满，图片大时超出部分会无法显示

background-repeat:背景重复方式

        repeat 默认值，xy两方向都重复

        repeat-x x方向

        repeat-y y方向

        no-repeat 不重复

background-position:背景图片的位置

        通过 top left right bottom center(九宫格) 中至少两个值来调整，否则第二个为center

        通过偏移量水平方向，垂直方向

background-origin:背景图片偏移量计算的原点

        padding-box 默认值,background-position从内边距处开始计算

        content-box 偏移位置从内容区开始计算

        border-box 偏移位置从边框处开始计算

background-clip:设置背景范围

        border-box 默认值，背景会出现在边框的下面

        padding-box 背景只会出现在内容区和内边距

        content-box 背景只会出现在内容区

background-size:背景图片的尺寸

        通过设置宽度和高度两个值来设置大小，只设置一个则默认另一个等比缩放，

        设置百分比来确定背景图大小

        cover 图片比例不变，将元素铺满

        contain 比例不变，完整显示

background-attachment:背景图片是否跟随元素移动

        scroll 默认值，随元素滚动

        fixed 固定在当前设置的位置上，不滚动

background:背景相关的简写属性，所有有关的设置都可以写在这里

        如果要设置background-size必须要跟在background-position之后用'/'隔开

        设置background-origin要先于background-clip

<!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: 500px;
            height: 500px;
            overflow: auto;
            background-color: #bfa;
            background-image: url(../01_introuduce/img/p1.jpg);
            background-repeat: no-repeat;
            background-position: left center;
            border: 10px red double;
            padding: 10px;
            background-clip: padding-box;
            background-origin: content-box;
            background-size: contain;
            /* background-size: 100px 200px; */

        }
        .box2{
            width: 300px;
            height: 600px;
            background-color: blanchedalmond;
            background-image: url(../exercise/练习截图/03_网易新闻列表.png);
            background-attachment: fixed;
        }
        .box3{
            width: 500px;
            height: 500px;
            padding: 20px;
            border: 10px red double;
            background: #bfa url(../exercise/练习截图/03_网易新闻列表.png) center center/contain no-repeat border-box content-box;
        }
    </style>
</head>
<body>
    <!-- <div class="box1">
        <div class="box2"></div>
    </div> -->
    <div class="box3"></div>
</body>
</html>

单纯使用CSS方式结合PS软件设置一个会渐变的背景

<!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>背景重复</title>
    <style>
        /* 导航条从上到下的渐变：在css中的方法
                取背景从上到下一个像素宽度，然后平铺 */
        .box1{
            width: 990px;
            height: 32px;
            background-color: antiquewhite;
            margin: 0 auto;
            /* background-image: url(./练习截图/07_素材.png);
            background-repeat: repeat-x; */
            background: url(./练习截图/07_素材.png) repeat-x;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

通过背景改变来表示按钮的不同状态（不同的状态触发后切换成不同的背景图片）

但是会存在一个问题第一次切换的时候两个背景之间会出现白色的空档，这是因为图片、音视频等这一类元素属于网页的外部资源，这类资源都需要浏览器单独发送请求对其加载。浏览器加载外部资源时时按需加载的，只有在需要使用的时候才会进行加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{
            display: block;
            height: 41px;
            width: 114px;
            background-image: url(./练习截图/08_按钮1.jpg);

        }
        a:hover{
            background-image: url(./练习截图/08_按钮2.jpg);
        }
        a:active{
            background-image: url(./练习截图/08_按钮3.jpg);
        }
    </style>
</head>
<body>
    <a href="javascript:;"></a>
</body>
</html>

解决图片闪烁问题：将背景图合成一张，然后通过background-position将背景图上下左右移动等方式实现图片的切换。这个方法在网页中使用十分广泛，可以有效解决按需加载带来的影响，称为CSS-Sprite，这种图称为雪碧图，可以一次性将多个图片加载近页面，降低请求次数，加快访问速度，但只是局限于背景图片且较为适用于小图标。

雪碧图使用步骤：

确定使用图标---->测量图标大小---->根据测量结果创建一个元素---->将雪碧图设置为背景图

---->设置偏移量以显示正确图片

渐变：可以设置一些复杂的背景颜色，实现颜色的过渡效果。

渐变是图片！！！需要background-image来设置

linear-gradient(direction,color1 p1,color2 p2,...,colorn pn)

线性渐变：沿着一条直线发生变化

颜色由1->2->...->n

direction： to left,to right,to right,to bottom(可省略，默认为bottom，也可组合)

45deg 度数

.5turn 转多少圈

p1-pn:指定颜色的范围，可以省略

渐变可以指定多种颜色，默认情况是平均等距分配，也可以手动设置渐变开始线

background-image: linear-gradient(red 60px,yellow);

表示从red的起始位置往下的60px内都是纯红色，这个范围内不发生渐变效果

background-image: repeating-linear-gradient(color1 px, color2 px,...) 可平铺的线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-image: repeating-linear-gradient(top left,red 50px,yellow 100px);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

radial-gradient(outline range at position,color1 p1,color2 p2,...,colorn pn)

径向渐变: 由中心向四周辐射

默认径向渐变的形状是根据元素的形状来计算的(正方形->圆形;长方形->椭圆形)

outline(可以省略): px px 指定径向渐变的大小

                       circle 正圆

                       elipse 椭圆

position(可省略): px px 通过具体像素指定圆心位置

                  center bottom top left right 通过方位设置位置

range(可省略): farthest-side 到达最远边

          closest-side 到达最近边

          farthest-corner 到达最远角

          closest-corner 到达最近角

repeating-radial-gradient(px px,color1,color2) 可平铺径向渐变

<!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;
            background-image: radial-gradient(farthest-side at 100px 100px,red,yellow);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

PSD图：由PS软件生成的多层的图片

<!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>
    <link rel="stylesheet" href="../02_CSS/CSS/rest.css">
    <link rel="stylesheet" href="../06_font&background/fontAwesome/css/all.css">
    <style>
        body{
            color: #5c6b7a;
        }
        .outer{
            width: 395px;
            margin: 60px auto;
            /* 阴影 */
            box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        }
        .img-wrapper .img{
            width: 100%;
            vertical-align: bottom;
        }
        .info{
            padding: 0 18px;
            font-size: 14px;
        }
        .info .title{
            margin: 13px 0 15px 0;
            font-size: 18px;
        }
        .info .little-title{
            font-size: 15px;
        }
        .info .introduce{
            margin: 16px 4px;
            line-height: 20px;
        }
        .star-wrapper{
            border-top: 1px solid #C1C6C9;
            height: 46px;
            line-height: 46px;
                        padding: 0 16px;
        }
        .star-wrapper .star{
            float: left;
            color: #ddd;
        }
        .star-wrapper .weibo{
            float: right;
        }
        .light{
            color: #a0c225;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="img-wrapper">
            <img src="./练习截图/09_电影卡片.jpg" alt="">
        </div>
        <div class="info">
            <h2 class="title">Animation films</h2>
             <h3 class="fas fa-map-marker-alt little-title">Animation</h3>
             <p class="introduce">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                 Corporis aliquam dolore fugiat veritatis eveniet tempora suscipit
                  ratione repellendus odio et maxime explicabo facere iste molestias ab in necessitatibus, minima hic.
             </p>
        </div>
        <div class="star-wrapper">
            <ul class="star">
                <li class="fas fa-star light"></li>
                <li class="fas fa-star light"></li>
                <li class="fas fa-star"></li>
                <li class="fas fa-star"></li>
            </ul>
            <ul class="weibo">
                <li class="fab fa-weibo"></li>
            </ul>
        </div>
    </div>
</body>
</html>