Блог

Главная - Вопросы по программированию - Как наложить один фон виджета нижнего колонтитула на фон Socket Div?

Как наложить один фон виджета нижнего колонтитула на фон Socket Div?

#html #css

#HTML #css

Вопрос:

У меня есть моя кодировка, я хочу внести небольшие изменения, используя только Css, но не получая свой результат.

На самом деле, я хочу наложить div виджета нижнего колонтитула на div сокета, но текст div сокета «дизайн Джона доу» должен быть виден. Возможно ли это?

другими словами: фон виджета нижнего колонтитула перезаписывается поверх фона сокета, но текст сокета должен быть виден пользователю. Спасибо

 #footer {
   animation-name: backgroundColorPalette;
   animation-duration: 19000ms;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: linear;
}

#footer {
   padding: 70px 0px;
   z-index: 1;
}

#socket {
   margin: auto;
   background: #000;
   color: #fff;
   padding: 5px 0px;
}

@keyframes backgroundColorPalette {
   0% {
      background-color: #ec008c;
   } 100% {
      background-color: #00bcc3;
   } 50% {
      background-color: #5fb26a;
   } 33.3% {
      background-color: #fc7331;
   }
} 
 <div id="footer">
   <center><h2>Footer widgets</h2></center>
</div>

<div id="socket">
   <center><p>Design by John Doe</p></center>
</div>

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

1. вы хотите, чтобы нижний колонтитул div и div сокета имели одинаковый фон?

2. Нет, приятель, если я захочу это сделать, я могу легко назначить свойство background css, я действительно хочу наложить виджет нижнего колонтитула на виджет сокета, но должны отображаться тексты сокетов, а не черный фон.

Ответ №1:

Вы могли бы сделать что-то вроде этого:

 #footer {
  animation-name: backgroundColorPalette;
  animation-duration: 19000ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

#footer {
  padding: 90px 0px;
  z-index: 1;
}
#socket {
  margin: auto;
  background: transparent;
  color: #fff;
  padding: 5px 0px;
  position: relative;
  bottom: 60px;
}
@keyframes backgroundColorPalette {
  0% {
background-color: #ec008c;
  }
  100% {
background-color: #00bcc3;
  }
  50% {
background-color: #5fb26a;
  }
  33.3% {
background-color: #fc7331;
  }
} 
 <div>
  <div id="footer">
    <center>
      <h2>Footer widgets</h2>
    </center>
  </div>

  <div id="socket">
    <center>
      <p>Design by John Doe</p>
    </center>
  </div>
</div>

Итак, идея настроена #socket position: relative так, чтобы мы могли перемещать ее вверх, используя bottom: 60px , чтобы она перекрывала #footer . Тогда мы можем создать #socket прозрачный фон.

Я также увеличил заполнение #footer , чтобы нижний колонтитул div выглядел более похожим на ваш вопрос.

Метки: