关于背景图片_ay图片-优快云博客

本文链接：https://blog.youkuaiyun.com/way_ay_ay/article/details/50497806

背景图：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景图</title>
    <style type="text/css">
        body ,html { padding: 0px;margin: 0px;}
        body {
            background-image: url("images/0.png");
        }
        .main {
            width: 80%;
            height: 100px;
            margin: 0 auto;
            border: 1px solid #ffff00;
        }
    </style>
</head>
<body>
    <div class="main">
        内容在背景图片上。
    </div>
</body>
</html>
还有控制背景图片的属性：
background-position: top center  ;/*向上对齐，左右居中*/
background-repeat: no-repeat;/*平铺与否*/
background-size:contain;/*可参见http://www.w3school.com.cn/cssref/pr_background-size.asp*/
img标签做：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景变img图</title>
    <style type="text/css">
        body {padding: 0px; margin: 0px;}
        .mainBody {
            width: 100%;
        }
        .divImg {
            position: absolute;
        }
        .main {
            width: 300px;
            height: 100px;
            border: 1px solid #ffff00;
            position: absolute;
            left: 20px;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="mainBody">
        <div class="divImg">
            <img src="images/0.png">
        </div>
        <div class="main">
            img作为“背景图片”。
        </div>
    </div>
</body>
</html>
设置position:absolute;定位后，脱离了文档流，要用偏移量来设置位置。
left: 20px;
top: 10px;
等价于
margin-left: 20px;
margin-top: 10px;