Я создаю экран веб-сайта как временную страницу «скоро». У меня есть круг за некоторым текстом. Кажется, что текст всегда находится в центре страницы, независимо от размера окна браузера, но круг, кажется, перемещается по разным размерам. Есть ли способ сделать круг полностью позади текста?
Будучи новичком в кодировании, я следовал некоторым учебникам, но ни один из них не работал.
Вот сайт, о котором идет речь: http://unixcast.com/
body{
margin: 0px;
padding: 0px;
background-color: #19181D;
}
.circle{
height: 400px;
width: 400px;
border-radius: 50%;
background: linear-gradient(#313247 0%,#19181D 30%);
position: absolute;
top: 20%;
left: 35%;
}
.circle:before,
.cirlce:after{
content: '';
height: 400px;
width: 400px;
background: linear-gradient(#FF849D 0%,#FF849D 5%, #2D2133 25%);
border-radius: 50%;
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-filter:blur(7px);
z-index: -1;
}
.cirlce:after{
width: 415px;
top: 35%;
-webkit-filter:blur(14px);
opacity: .3;
}
.unixcast{
font-family: sans-serif;
font-size: 40px;
color: white;
letter-spacing: 20px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%)
}
.msg{
font-family: sans-serif;
font-size: 20px;
color: white;
letter-spacing: 20px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span class = "circle"></span>
<span class = "unixcast"> UNIXCAST </span>
<span class = "msg">IS COMING SOON!</span>
<span class = "notifymsg"> GET NOTIFIED WHEN IT'S READY</span>
<span class = "field">
<input type = "email" name = "ENTER YOUR EMAIL"/>
<button>NOTIFY ME</button>
</span>
</body>
</html>>
Я ожидал увидеть круг прямо за текстом, но, похоже, он перемещается с экранами и окнами разного размера.
разве это хорошо
пожалуйста, напишите этот css для вашего класса круга
.circle {
height: 400px;
width: 400px;
border-radius: 50%;
background: linear-gradient(#313247 0%,#19181D 30%);
position: absolute;
left: 0px;
right: 0px;
margin: auto;
top: 0px;
bottom: 0px;
}
Пожалуйста, опубликуйте также свой html-код