前端 背景图片


背景图片

<!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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM