нижний колонтитул с фоновым изображением наполовину в нем - PullRequest
Новая
       8

нижний колонтитул с фоновым изображением наполовину в нем

0 голосов
/ 25 февраля 2020

Я разработал нижний колонтитул для веб-сайта, использующего Figma, который выглядит так, как показано на рисунке ниже:

см. Рисунок Изображение ниже изображение дизайна

Добавлен рабочий пример 

#f-text{
    font-size: 14px;
    color: #ffffff;
}
#footer-head{
	font-family: 'Poppins', sans-serif;
    font-size: 4.5em;
    color: #ffffff;
}

#footer-text{
    color: #818181;
    font-size:17px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
 <footer class="footer mt-5" style="width:100%; padding-top: 100px; padding-bottom:40px; margin-top: 75px; position:absolute; background-color: #0C0C0C">
   <div class="row">
 <div class="col-sm-8 mx-auto my-auto text-center">
   <div class="col-6">
     <h5 id="footer-text">phone</h5>
     <p style="color: #ffffff;" id="f-text">7879229242</p>
   </div>
   <div class="col-6 ">
     <h5 id="footer-text">address</h5>
     <ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
       <p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p>
     </ul>
   </div>
   <div class="col-6 text-center">
     <h5 id="footer-text">follow us</h5>
     <ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
       <ol class="text-center">
         <li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li>
         <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li>
         <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li>
         <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li>
       </ol>
     </ul>
   </div>
 </div>
 <div class="col-sm-4">
   <h5 id="footer-head">AW</h5>
   <p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p>
 </div>
   </div>
   <p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p>
 </footer>

Мне нужна помощь с превращением моего дизайна в рабочий код.

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

Поскольку вам нужно, чтобы "background-image" выходило за нижний колонтитул, вы не можете использовать свойство background-image в самом нижнем колонтитуле.

Использовать псевдоэлемент абсолютно позиционированный и поместить фоновое изображение на что .

Например 

body {
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: flex-end;
}

footer {
  margin: 0 auto;
  position: relative;
  width: 80%;
  height: 50vh;
  background: black;
}

footer::after {
  content: "";
  width: 20vw;
  height: 20vw;
  background-image: url(http://www.fillmurray.com/460/460);
  background-size: contain;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  z-index: -1
}
<footer>

</footer>
0 голосов
/ 25 февраля 2020 

#f-text {
  font-size: 14px;
  color: #ffffff;
}

#footer-head {
  font-family: 'Poppins', sans-serif;
  font-size: 4.5em;
  color: #ffffff;
}

#footer-text {
  color: #818181;
  font-size: 17px;
}

footer {
  position: relative;
}

.footer-main {
  width: 90%;
  padding-top: 100px;
  padding-bottom: 40px;
  margin-top: 75px;
  background-color: #0C0C0C;
}

.img-styling {
  position: absolute;
  right: 0;
  top: 35px;
  z-index: -1;
  width: 30%;
}
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
 <div>
   <div class="footer-main">
     <div class="row">
       <div class="col-sm-8 mx-auto my-auto text-center">
         <div class="col-6">
           <h5 id="footer-text">phone</h5>
           <p style="color: #ffffff;" id="f-text">7879229242</p>
         </div>
         <div class="col-6 ">
           <h5 id="footer-text">address</h5>
           <ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="1400" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
             <p id="f-text">infront of kamal talkies, rajnandgaon, chattisgarah</p>
           </ul>
         </div>
         <div class="col-6 text-center">
           <h5 id="footer-text">follow us</h5>
           <ul class="list-unstyled mt-3" data-sal="slide-up" data-sal-delay="2000" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
             <ol class="text-center">
               <li style="display:inline-block; color: #ffffff;padding-right: 0.5em;" id="f-text">In</li>
               <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Fb</li>
               <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Tw</li>
               <li style="display:inline-block;color: #ffffff; padding-right: 0.5em;" id="f-text">Yt</li>
             </ol>
           </ul>
         </div>
       </div>
       <div class="col-sm-4">
         <h5 id="footer-head">AW</h5>
         <p style="color: #ffffff" id="f-text">AW Zone is a full-service Photography Agency based in rajnandgaon, founded by Ayush Waghmare.</p>
       </div>
     </div>
     <p class="text-muted text-center mt-5 pt-5" id="footer-par" style="color:white; font-size: 13px;">Coded+designed by<span style="font-weight:medium;"> Semicolon</span> with passion and <i class="far fa-keyboard"></i></p>
   </div>

   <img class="img-styling" src="https://www.androidcentral.com/sites/androidcentral.com/files/topic_images/2014/materialdesign_principles_metaphor.png" alt="image" />
 </div>
...