SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=, initial-scale=">
	<meta http-equiv="X-UA-Compatible" content="">
	<title>Happy Birthday</title>
    <style>
        .box{
            position: relative; /*这里要给一个相对定位 子元素的绝对定位才有作用,简记为子绝父相 */
            width:800px;
            height:800px;
            background: url("https://i.loli.net/2020/11/20/zKvoM6nCPHWSGry.jpg") no-repeat;
            background-size: 100% auto; /*跟上一行的效果一样, CSS3的属性*/
        }

        .box h1{
            position:absolute; /*绝对定位*/
            left:35%;
            top:200px;
            font-family: "微软雅黑 宋体";
            font-size: 4em;
            color: pink;
            text-align: center; 
        }

        .box p{
            position: absolute; /*绝对定位*/
            left:25%;
            top:300px;
            font-size:3em;
        }
    </style>
</head>
<body>
	<div class="box">
        <h1>生日快乐</h1>
        <p>to: My Dear XXXX</p>
    </div>
</body>
</html>