Html backgroud-image 调整大小

以下属性可以调整 html 背景图片的大小和缩放

background-position: 10% 40%;/这个是按从左往右,从上往下的百分比位置进行调整/
background-size: 50% 50%; /按比例缩放/
background-size: 100px 100px; 这个是按数值缩放
background-repeat: no-repeat; /还有 repeat-x,y 等/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #test{
            width:400px;
            height:400px;
            background-image: url("img/2.jpg");
            background-position: 10% 40%;/*这个是按从左往右,从上往下的百分比位置进行调整*/
            background-size: 50% 50%;/*按比例缩放*/
            /*background-size: 100px 100px;!*这个是按数值缩放*!*/
            background-repeat: no-repeat;/*还有repeat-x,y等*/
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

  
    展开阅读全文