CSS背景 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            background-color: yellow;
            background-image: url("1.png");
            background-repeat: no-repeat;
        a:link{
            background-image: url("3.jpg");
        }
            /*background-position: 10px 20px;  水平方向，、垂直方向*/
        }
        body{
            background-attachment: fixed;   /*fixed永远相对于浏览器窗口的定位，不随窗口而滚动*/
            background-image: url("2.jpg");
        }
        a:link{
            background-image: url("3.jpg");
        }
        a:hover{
            background-image: url("4.jpg");
        }
        /*当鼠标移动到a上面时，才去加载4.jpg图片，所以鼠标移上去会闪一下，第二次便不会了，因为已经加载成功了*/
        /*可以使用background-position: -10px 0px来切换图片的显示位置，这种技术叫做图片整合技术*/
        /*                                将多张图片整合在一张图片里，浏览器只需要发一次请求，便可以加载多图片，还减少了图片的总大小*/
        .box2{
            background: #bfa url("2.png") center center no-repeat;
            /*简写*/
        }
    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <a href="#"></a>
</body>
</html>

 

posted @ 2019-08-26 17:33  Coding_Changes_LIfe  阅读(104)  评论(0)    收藏  举报