Как свойство фона CSS влияет на дочерние элементы?

ProgramBox

Как свойство фона CSS влияет на дочерние элементы?

Post author:admin
Запись опубликована:13 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #background-color

Вопрос:

Я просто практиковался в HTML и CSS, когда заметил, что, когда я устанавливаю цвет фона тела на красный, вся страница, включая поля div, становится красной. Раньше я думал, что если мы применим цвет bg к телу, это изменит только цвет фона тела, а не элементы, которые находятся внутри тела. Но почему цвет фона моих дивов также меняется на красный?? Мне нужно вручную задать цвет для моего div, чтобы они не были того же цвета, что и у родителя.

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

      body{
        background-color:red; // Relevant line!
      }
      .container {
        width: 400px;
        /* border: 1px solid grey; */
        border-radius: 5px;
        padding: 10px;
        margin: 20px auto;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      }

      .heading {
        padding: 10px;
        margin: 0px;
        text-align: center;
        font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
          "Lucida Sans", Arial, sans-serif;
        background-color: rgba(45, 45, 45, 0.1);
      }

      /* container 2 styling */
      .css-utility > li:nth-child(1) {
        opacity: 0.7;
      }

      .css-utility > li ul li:nth-child(1) {
        text-transform: lowercase;
      }
      .css-utility > li ul li:nth-child(2) {
        text-transform: uppercase;
      }
      .css-utility > li ul li:nth-child(3) {
        text-transform: capitalize;
      }

      .css-utility > li:nth-child(3) p {
        font-weight: 900;
      }
      .css-utility > li:nth-child(4) p {
        line-height: 30px;
        letter-spacing: 3px;
        background-color: aliceblue;
      }
      /* container 2 styling ends */

      /* container 3 styling */

      .box , .bg-test {
        width: 100%;
        height: 200px;
        margin: 10px 0px;
      }

      .container > .box:nth-child(2) {
        background: linear-gradient(35deg, #9b59b6, #3498db);
      }

      .container > .box:nth-child(3) {
        background: repeating-linear-gradient(
          35deg,
          yellow 0px,
          yellow 30px,
          black 30px,
          black 60px
        );
      }
      /* styling for container 3 ends here */

      /* styling for container 4 starts here */
      
    </style>
  </head>
  <body>
      <h2 align="center">
          Practice
      </h2>
    <!-- container 1 -->
    <div class="container">
      <h4 class="heading">HTML utility tags</h4>
      <hr />
      <ol>
        <li>
          <p>strong tag make the text <strong>bold</strong></p>
        </li>
        <li>
          <p>U tag add <u>underline</u> to the text</p>
        </li>
        <li>
          <p>em tag make the text <em>italic</em></p>
        </li>
        <li>
          <p>s tag make the text <s>strickthrough</s></p>
        </li>
      </ol>
    </div>

    <!-- container 2 -->
    <div class="container">
      <h4 class="heading">Css utility properties</h4>

      <ol class="css-utility">
        <li>
          <p>Opacity css property</p>
        </li>
        <li>
          <p>Text Transform Property</p>
          <ul>
            <li>Text transform - Lower Case</li>
            <li>Text transform - Upper Case</li>
            <li>Text transform - Capitalize Case</li>
          </ul>
        </li>

        <li>
          <p>Font-weight property</p>
        </li>

        <li>
          <p>Line Height and letter spacing</p>
        </li>
      </ol>
    </div>
    <!-- End of the container 2 -->

    <!-- container 3 -->

    <div class="container">
      <h4 class="heading">linear gradient and Strips</h4>

      <div class="box"></div>
      <div class="box"></div>
    </div>

    <!-- container 3 ends -->

    <!-- container 4 starts -->
    <div class="container bg">
      <h4 class="heading">
        Testing background color
      </h4>
      <div class="bg-test">

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

Я попробовал это с div внутри div, и происходит то же самое. Придание цвета фона родительскому div делает дочерний div того же цвета.

Я знаю, что это можно сбросить с помощью * селектора

 *
{
   background-color:white;
}

Мой вопрос в том, почему такое поведение, и я не знаю, почему я никогда этого не замечал, но в любом случае это происходит. Поскольку это цвет фона имени, он должен задавать только цвет фона элемента, к которому он применяется, а не цвет дочернего фона, верно? но почему это происходит?

1. Да, это значение по умолчанию в HTML, но вы можете установить отдельные цвета для дочерних элементов.

2. потому что начальное значение-цвет фона: прозрачный; это означает, что он будет отображать фон всего, что находится на заднем плане (тело в вашем случае). developer.mozilla.org/en-US/docs/Web/CSS/…

3. Попробуй div { background-color:white }

4. Для меня очень удивительно, что я заметил это сейчас.. Некоторое время я был неактивен в веб-разработке и, похоже, забыл довольно много вещей..

5. @justsomeone Итак, как я могу установить его на что-то, что будет применять цвет фона только к применяемому элементу, а не к дочернему элементу? Я знаю один метод, которым я уже поделился в конце вопроса, но есть ли у них и другой способ?

Ответ №1:

Я не согласен с вашим утверждением, что цвет фона наследуется. Этого просто нет.

Что происходит, так это то, что ваше тело содержит других дивов. Это элемент блока, в котором живут другие элементы. Будучи блочным элементом, он расширяет свою ширину и высоту, чтобы соответствовать своим дочерним элементам. Поскольку цвет дочерних элементов по умолчанию прозрачный, они кажутся красными. Но это не так.

Это можно доказать, абсолютно расположив div вне его родительского элемента. Вы увидите, что у ребенка нет цвета фона родителя. Смотрите мой пример ниже.

 #red{
  width:100%; 
  height:100px;
  color:white;
  background-color:red;
}

#green{
  width:100%;
  height:100px;
  color:blue;
  background-color:green;
}

#red-child{
  position:absolute;
  top:150px;
}

 <body>
  <div id="red">
    i'm a red div text which is inside my parent element (relative positioning)     
    <div id="red-child">
        i'm a red div text which is absolutely positioned outside my parent element. Font color is inherited, background color is not.
    </div>
  </div>
  <div id="green">
      i'm a green div text which is inside my parent element (relative positioning)     
  
  </div>

</body>

Вывод: это ожидаемое поведение из-за их расположения и транспарантного цвета фона по умолчанию. Если вы хотите, чтобы у детей был другой цвет, используйте цвет фона по умолчанию для всех элементов div и при необходимости перезаписывайте

 div{ /* for divs only */
    background-color:white;
}

*{ /* for all elements */
    background-color:white;
}

Ответ №2:

Значение по умолчанию background-color равно transparent , поэтому, когда вы не указали цвет фона, он показывает свой родительский цвет фона.

Вот пример, я надеюсь, что это поможет.

 .div1 {
  background-color: red;
}

.div2 {
  background-color: green;
}

 <div class="div1">
  I am red.
  <div class="div2">
    I am green.
    <div class="div3">
      My background color is transparent so I am green too.
    </div>
  </div>
</div>

1. Хорошо, это то, что я видел, но что, если мы захотим изменить поведение по умолчанию?

2. Вы должны установить другой фон для каждого элемента, который вы хотите изменить.

3. Я нахожу этот ответ сбивающим с толку. Вопрос связан с цветом фона, который не наследуется!

Метки: Как свойство фона CSS влияет на дочерние элементы?