它是一个完整的背景图片,中间有 7 个 div,中间是文字。
这是代码,但是我可以让它随着窗口大小的变化而响应,因为如果发生窗口变化,它就会中断。我只是在使用普通的 CSS。甚至没有 Bootstrap 。任何帮助和协助都会对我有很大的帮助。谢谢。
HTML
body {
background-color:black;
}
#main {
background-image: url("./girl-jump.png");
background-size: cover;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 452px;
width: 1021px;
}
html {
height: 100%;
}
#first {
height: 452px;
width: 234px;
float:left;
border-right:2px solid white;
}
#second {
height: 225px;
width: 263px;
overflow:hidden;
float:left;
border-right:2px solid white;
border-bottom:1px solid white;
}
#third {
height: 225px;
width: 263px;
overflow:hidden;
float:left;
border-right:2px solid white;
border-bottom:1px solid white;
}
#fourth {
height: 225px;
width: 261px;
overflow:hidden;
float:left;
border-right:2px solid white;
border-bottom:1px solid white;
}
#fifth {
height: 227px;
width: 263px;
overflow:hidden;
float:left;
border-right:2px solid white;
border-top:1px solid white;
}
#six {
height: 225px;
width: 263px;
overflow:hidden;
float:left;
border-right:2px solid white;
border-top:1px solid white;
}
#seventh {
height: 225px;
width: 261px;
overflow:hidden;
border-right:2px solid white;
border-top:1px solid white;
}
.center-text {
position: relative;
top: 40%;
transform: translateY(-50%);
text-align: center;
}
.center-text {
color:white;
}
<div id="main">
<div id="first">
<p class="center-text">Excellence</p>
</div>
<div id="second">
<p class="center-text">Quality</p>
</div>
<div id="third">
<p class="center-text">Efficiency</p>
</div>
<div id="fourth">
<p class="center-text">Creativity</p>
</div>
<div id="fifth">
<p class="center-text">Faith</p>
</div>
<div id="six">
<p class="center-text">Effectiveness</p>
</div>
<div id="seventh">
<p class="center-text">Teamwork</p>
</div>
</div>
这是 fiddle
最佳答案
您可以切换到 flex 并避免使用这样的固定值:
body {
background-color: black;
margin: 0;
padding: 0;
}
#main {
background-image: url("https://lorempixel.com/800/800/");
background-size: cover;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
display: flex;
}
.part {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
#first {
flex: 1;
border-right: 2px solid white;
align-items:center;
display:flex;
}
#second,
#third,
#fourth,
#fifth,
#seventh,
#six {
flex: 1;
border-right: 2px solid white;
border-top: 1px solid white;
align-items:center;
display:flex;
}
.center-text {
color: white;
text-align:center;
flex:1;
}
<div id="main">
<div id="first">
<p class="center-text">Excellence</p>
</div>
<div class="part">
<div id="second">
<p class="center-text">Quality</p>
</div>
<div id="third">
<p class="center-text">Efficiency</p>
</div>
</div>
<div class="part">
<div id="fourth">
<p class="center-text">Creativity</p>
</div>
<div id="fifth">
<p class="center-text">Faith</p>
</div>
</div>
<div class="part">
<div id="six">
<p class="center-text">Effectiveness</p>
</div>
<div id="seventh">
<p class="center-text">Teamwork</p>
</div>
</div>
</div>
关于html - 具有 7 个 div 的响应式背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47508880/