Блог

Главная - Вопросы по программированию - как остановить перекрытие фонов div

как остановить перекрытие фонов div

#html #css

#HTML #css

Вопрос:

Эй, итак, я использовал это приложение для разделения фигур, которое создает для вас разделители div, и я пытался создать градиентный фон, затем разделитель, затем сплошной цвет, и я не знаю, как я пробовал это с помощью css, который мне предоставил веб-сайт, и это вообще не работает, и я понятия не имею, что делать? (Я вроде как новичок в стеке, если вам нужно что-нибудь еще, пожалуйста, дайте мне знать)

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Page Title</title>
    </head>
    <body align="center">
        <div class="TopPage">
        top page content here
    </div>
    <div class="curvedlinedivider">
      <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
      </svg>
    </div>
    <div class="BottomPage">
        bottem page content here
    </div>
    </body>
</html>
<style>
.curvedlinedivider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.curvedlinedivider svg {
    position: relative;
    display: block;
    width: calc(100%   1.3px);
    height: 107px;
}

.curvedlinedivider .shape-fill {
    fill: #24252A;
}
</style>

мой внешний файл css:

 .BottomPage {
  background-color: #24252A;
}

.TopPage {
  background: linear-gradient(to right, #f00, #00f);
  margin: 0;
  border-bottom: 0px;
  display: block;
}

body {
  margin: 0;
}

результат моего кода
Результат

Комментарии:

1. Вам нужен градиентный фон для фигурного div?

2. в принципе, я хочу градиентный фон в верхней части страницы, затем волну, затем сплошной цветной фон, похожий на сайт carl bots

Ответ №1:

Проверьте этот код, я надеюсь, что этот код поможет вам понять, как создать svg. И я использовал https://getwaves.io / для создания простого wave svg. Также вы можете проверить это.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            overflow-x: hidden;
            height: 150vh;
        }
        .main{
            position: absolute;
            width: 100vw;
            height: 150vh;
            background-color: #9167ce;
            color: aliceblue;
            text-align: center;
            margin-top: 0;
        }
        .main>h2{
            font-size: 4rem;
            font-family: Arial;
            z-index: 4;
        }
        .main>p{
            font-size: 1rem;
            font-family: Bahnschrift;
            z-index: 2;
        }
        svg{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 0;
        }
    </style>
</head>
<body>
    <div class="main">
        <h2>Hello World!!!</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Accusantium aliquam aut delectus dolores incidunt ipsa, ipsam,
            iusto neque porro quisquam, quo ratione tempora velit vero.</p>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#273036" fill-opacity="0.91" d="M0,128L60,106.7C120,85,240,43,360,32C480,21,600,43,720,64C840,85,960,107,1080,101.3C1200,96,1320,64,1380,48L1440,32L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">
        </path></svg>

    </div>
</body>
</html>