页脚中有一半背景图像

Question

我使用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>

我需要帮助将我的设计转化为工作代码。

Answer 1

由于需要"背景图像"来扩展到页脚之外，因此不能在页脚本身上使用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>

Answer 2

#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>