美文网首页
雪碧图和background属性

雪碧图和background属性

作者: f6d8ee519880 | 来源:发表于2018-10-23 20:12 被阅读0次

    雪碧图

    • 就是将网页制作中使用的多个小图片合并成一个图片,使用css计数将这张合成的图片应用在网页不同的地方,雪碧图可以减少网页加载时的http请求数,优化网页性能。

    background属性

    • 设置背景颜色
    background-color
    
    • 设置背景图片地址
    background-image
    
    • 设置背景图片如何重复平铺
    background-repeat
    
    • 设置背景图片位置
    background-position
    
    • 设置背景图片是固定还是随着页面滚动条滚动
    background-attachment
    

    亚马逊

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>亚马逊</title>
        <style type="text/css">
            .box:link{
                display:block;
                width:48px;
                height:27px;
                background-image:url(yamaxun.png);
                background-repeat:no-repeat;
                background-position:0px -338px;
            }
            .box:hover{
                background-position:-49px -338px;
            }
            .box:active{
                background-position:-120px -338px;
            }
        </style>
    </head>
    <body>
        <a href="#" class="box"></a>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:雪碧图和background属性

          本文链接:https://www.haomeiwen.com/subject/pbxzzftx.html