Почему дети одного из родителей дублируют фоновое изображение родителей? - PullRequest
Новая
       11

Почему дети одного из родителей дублируют фоновое изображение родителей?

2 голосов
/ 06 августа 2020

Я создал такую ​​веб-страницу: image 

       * {
        margin: 0;
        padding: 0;
    }
    
    html {
        width: 100%;
        height: 100%;
        font-family: 'Raleway', sans-serif;
    }
    
    body {
        width: 100%;
        height: 100%;
    }
    
    div {
        background-image: url(download.jpeg);
        background-size: cover;
        height: 25%;
        width: 100%;
        margin: 0;
        z-index: 1;
    }
    
    .combo {
        height: 70%;
        width: 100%;
        z-index: 2;
    }
    
    .textbox {
        height: 100%;
        width: 100%;
        display: table;
    }
    
    h1 {
        text-align: center; 
        font-size: 200%;
        color: cornsilk;
        display: table-cell;
        vertical-align: middle;
    }
    
    .navbar {
        height: 30%;
        width: 100%;
    }
    
    .column {
        height: 100%;
        width: 25%;
        float: left;
        display: table;
    }
    
    h2 {
        color: cornsilk;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
 <!DOCTYPE html>
    <html>
    <head>
    

    <title>Demo</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" 

    rel="stylesheet">
    </head>
    <body>
        <div>
            <div class = "combo">
                <div class = "textbox">
                    <h1>WELCOME TO MY WEB</h1>
                </div>
            </div>
            <div class = "navbar">
                <div class = "column">
                    <h2>Home</h2>
                </div>
                <div class = "column">
                    <h2>Gallery</h2>
                </div>
                <div class = "column">
                    <h2>Activities</h2>
                </div>
                <div class = "column">
                    <h2>About</h2>
                </div>
            </div>
        </div>
    </body>
    </html>

Но проблема в том, что фоновое изображение, которое я установил в div, дублируется во всех его дочерних элементах. Я хочу, чтобы это было одно непрерывное изображение. Как я могу этого добиться? Кроме того, в чем причина такого поведения?

Я пытался установить z-index в элементе div, но это не сработало. Кроме того, я попытался сделать фон столбца черным, но каким-то образом фон на мгновение стал черным, а затем превратился в тот же фон. Может кто-нибудь объяснить такое поведение?

Ответы [ 2 ]

3 голосов
/ 06 августа 2020

Это потому, что использование div в качестве селектора CSS выбирает все div. Если вы хотите, чтобы изображение находилось позади всех из них, дайте содержащему его div класс и установите для него фоновое изображение: 

<div class="container">
  <div class = "combo">
    <div class = "textbox">
      <h1>WELCOME TO MY WEB</h1>
    </div>
  </div>
  <div class = "navbar">
    <div class = "column">
      <h2>Home</h2>
    </div>
    <div class = "column">
      <h2>Gallery</h2>
    </div>
    <div class = "column">
      <h2>Activities</h2>
    </div>
    <div class = "column">
      <h2>About</h2>
    </div>
  </div>
</div>

.container {
  background-image: url(download.jpeg);
  background-size: cover;
}
0 голосов
/ 06 августа 2020

Я предлагаю вам использовать атрибут id вместо class. class обычно используется для применения одного стиля к группе элементов, с другой стороны, id используется для применения стиля к определенному элементу c, поскольку id является уникальным идентификатором. Было бы лучше, если вы измените атрибуты class на id и примените CSS с помощью селектора #: 

#container {
    background-image: url(download.jpeg);
    background-size: cover;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...