HTML 7—背景

背景1

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            /* 设置背景样式 */
            background-color: #bfa;
            /*             
                使用background-image来设置背景图片 
                    如果背景图片大于元素，默认会显示图片的左上角
                    如果背景图片和元素一样大， 则会将背景图片全部显示
                    如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

                可以同时为一个元素指定背景颜色和背景图片，
                    这样背景颜色将会作为背景图片的底色

                background-repeat用于设置背景图片的重复方式
                可选值:
                    repeat，默认值，背景图片会双方向重复(平铺)
                    no-repeat，背景图片不会重复，有多大就显示多大
                    repeat-x，背景图片沿水平方向重复

            */
            background-image: url();
            background-repeat: repeat-y;
        }

    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>

 背景2

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            width: 500px;
            height: 500px;
            margin: 0px auto;
            /* 设置一个背景颜色 */
            background-color: #bfa;
            /* 设置一个背景图片 */
            background-image: url();
            /* 设置一个图片不重复 */
            background-repeat: no-repeat;
            /*             
                背景图片默认是贴着元素的左上角显示 
                通过background-position可以调整背景图片在元素中的位置

                可选值:
                    该属性可以使用top right left bottom center中的两个值
                    来指定一个背景图片的位置
                    top left 左上
                    bottom right 右下
                如果只给出一个值，则第二个值默认是center

                也可以直接指定两个偏移量，
                    第一个值是水平偏移量
                        如果指定的是一个正值，则图片会向右移动指定的像素
                        如果指定的是一个负值，则图片会向左移动指定的像素
                    第二个是垂直偏移量
                        如果指定的是一个正值，则图片会向下移动指定的像素
                        如果指定的是一个负值，则图片会向上移动指定的像素


            */
            background-position: bottom left;;
        }

        body{
            background-image: url();
            background-repeat: no-repeat;
            /*             
                background-attachment用来设置背景图片是否随页面一起滚动
                可选值:
                    scroll，默认值，背景图片随着窗口滚动
                    fixed，背景图片会固定在某一位置，不随页面滚动 
            
                当背景图片的background-attachment设置为fixed时，
                    背景图片的定位永远相对于浏览器的窗口

            */
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>

 设置按钮

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*     
            做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
                这个闪烁会造成一次不佳的用户体验。
            产生问题的原因:
                背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求 
                但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
            我们这个练习，一上来浏览器只会加载link .png由于hover和active的状态没有马上触发，
                所以hover .png和active .png并不是立即加载的
            当hover被触发时，浏览器才去加载hover .png
            当active被触发时，浏览器才去加载active .png
            由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况

            为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
            然后在通过background-position来切换要显示的图片的位置
                这种技术叫做图片整合技术（CSS-Sprite）

        */
        .btn :link {
            /* 将a转换为块元素 */
            width: 500px;
            height: 400px;
            margin: 0px auto;
            background-image: url();
            /* 设置一个图片不重复 */
            background-repeat: no-repeat;

        }

        .btn :hover {
            /* 设置背景图片
            background-image: url(); */
            /* 当是hover状态时，希望图片可以向左移动 */
            background-position: -93px 0px;
        }

        .btn :active {
            /* 设置背景图片
            background-image: url(); */
            /* 当是hover状态时，希望图片可以向左移动 */
            background-position: -186px 0px;
        }
    </style>
</head>

<body>
    <!-- 创建一个超链接 -->
    <a href="#" class="btn">超链接</a>
</body>

</html>

 简写属性

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            height: 5000px;
            /*设置一个背景颜色*/
            /*background-color: #bfa;*/
            /*设置一个背景图片*/
            /*background- image: url(img/3.png);*/
            /*设置背景不重复*/
            /*background-repeat: no-repeat;*/
            /*设置背景图片的位置*/
            /*background-position: center center;*/
            /*设置背景图片不随滚动条滚动*/
            /*background-attachment: fixed;*/

            /*
                background
                - 通过该属性可以同时设置所有背景相关的样式
                也没有数量的要求，不写的样式就使用默认值
            */
            background: #bfa ur1() center center no-repeat fixed;

        }
    </style>
</head>

<body>
    <!-- 创建一个超链接 -->
    <a href="#" class="btn">超链接</a>
</body>

</html>

 雪碧图简单应用

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            width: 129px;
            height: 45px;
            background-image: url(amazon-sprite.jpg);
        }
        .box2 {
            width: 42px;
            height: 30px;
            background-image: url(amazon-sprite.jpg);
            /* 设置偏移量 */
            background-position: -58px -338px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

amazon-sprite.jpg

 

posted @ 2020-07-17 21:42  我等着你  阅读(177)  评论(0)    收藏  举报