Как центрировать фигуру в CSS - PullRequest
Новая
       44

Как центрировать фигуру в CSS

0 голосов
/ 22 мая 2019

Я создаю экран веб-сайта как временную "страницу, которая скоро появится". У меня есть круг за текстом. Кажется, что текст всегда центрируется на странице, независимо от размера окна браузера, но круг, кажется, перемещает местоположения на разные размеры. Есть ли способ для меня, чтобы круг был полностью позади текста?

Будучи новичком в коде, я следовал некоторым учебникам, но ни один из них не работал

Вот сайт, о котором идет речь: 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>>

Я ожидал увидеть кружок прямо за текстом, но он, кажется, двигается с экранами и окнами разных размеров

1 Ответ

3 голосов
/ 22 мая 2019

пожалуйста, напишите это 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;
 }
...