z-index及透明度opacity，利用overflow设置头像

z-index定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="day114.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--name="viewport"为了适应手机端-->
</head>
<body>
    <div>这是最底层的页面内容</div>
    <div class="cover"></div>
    <div class="modal">
        <h1>登录页面</h1>
        <p>username:<input type="text"></p>
        <p>password:<input type="text"></p>
        <button>注册</button>
    </div>
</body>
</html>

body{
    margin: 0;
}

.cover{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

.modal{
    background-color: white;
    height: 200px;
    width: 400px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 100;
    margin-left: -200px;
    margin-top: -100px;
    text-align: center;
}

opacity定义和用法

opacity 属性设置元素的不透明级别。默认值为1。rgba只能影响颜色，而opacity可以修改颜色和字体(元素)。

margin 0 auto什么作用与语法重点介绍教程

margin:0 auto作用语法:

1、margin:0 auto介绍
margin:0 auto 设置对象上下间距为0，左右自动。
可拆分： margin:0 auto 0 auto（上下）
还可拆分为：margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;

2、作用
对DIV设置margin:0 auto样式，是为了让DIV在浏览器中水平居中。布局居中、水平居中，均加入margin:0 auto即可。

关节点：auto(自动、自适应)

假如一个DIV我们设置宽度为500px，然后设置margin:0 auto样式后，假如你浏览器窗口宽度为1000px宽，这个时候此DIV靠左和靠右间距为（auto）这个时候浏览器会自动辨析DIV靠左和靠右各250px宽度间距，此时这个DIV盒子自然而然就水平居中浏览器中。

为什么要设置margin:0 auto？
设置此样式让DIV布局水平居中于浏览器中，目的就是兼容各大浏览器让布局居中。如果不加margin:0 auto CSS样式，会造成布局在有的浏览器中居中有的浏览器靠左。

禁：如果要让DIV布局居中浏览器中，加入margin:0 auto就不能加入float浮动样式，避免逻辑错误，造成布局居中不兼容。

设置头像(让图片自适应填充)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="day114.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--name="viewport"为了适应手机端-->
</head>
<body>
    <div id="d1">
        <img src="300x300.jpeg">
    </div>
</body>
</html>

body{
    margin: 0;
    background-color: #4e4e4e;
}

#d1{
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border: 5px solid white;
    margin: 0 auto;
    overflow: hidden;
}

#d1>img{
    width: 100%;
    /*占标签100%比例*/
}

while True: print('studying...')