前端 背景图片

背景图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景图片</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orangered;
        }

        .box {
            /*显示比屏幕大的图片：缩放尺寸*/
            /*background-image: url("img/kj.gif");*/
            /*尽量只设置宽，高等比缩放，不失真*/
            /*background-size: 300px 300px;*/
        }

        .box {
            /*显示比屏幕小的图片：处理平铺与位置*/
            background-image: url("img/lss.jpg");
            /*平铺: repeat-x repeat-y repeat no-repeat*/
            background-repeat: no-repeat;
            /*位置*/
            /*1.只设置x轴，y轴默认center*/
            /*2.x轴：left center right 具体像素 百分百*/
            /*2.y轴：top center bottom 具体像素 百分百*/
            background-position: center center;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
posted @ 2019-08-01 18:36  『侠客行』  阅读(864)  评论(0)  编辑  收藏  举报