opacity表示透明度,取值在0-1之间
.container{
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
background-color: #ffffff70;
margin-top: -50px;
margin-left: -150px;
}
全局居中部分,直接50%可以让左上角定位在页面正中间,通过margin来调节细节部分来达到完全居中的效果。
border-radius取值为50%时可以用来画圆。
代码
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>奥运五环</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="class blue"></div>
<div class="class black"></div>
<div class="class red"></div>
<div class="class yellow"></div>
<div class="class green"></div>
</div>
</body>
</html>
*{ margin: 0; padding: 0;
}
.container{
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
background-color: #ffffff70;
margin-top: -50px;
margin-left: -150px;
}
.class{
width: 80px;
height: 80px;
border-radius: 50%;
}
.blue{
position: absolute;
left: 0;
border: 10px solid blue;
}
.black{
position: absolute;
left: 110px;
border: 10px solid black;}
.red{
position: absolute;
left: 220px;
border: 10px solid red;
}
.yellow{
position: absolute;
left: 55px;
top: 50px;
border: 10px solid yellow
}
.green{
position: absolute;
left: 165px; top: 50px;
border: 10px solid green
}
显示结果