我想要我的背景图片,当渲染浏览器更大并显示整个文本时,它会变大并保持文本居中,当浏览器很小并且不显示时,保持静止并居中显示文本整个文本(水平)。
欢迎任何帮助,
body{
background-image: url(
http://www.icotoken.tel/images/slider_slide_5.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
color: white;
padding: 40px;
margin: 0;
}
.text {
margin: auto;
padding: 40px;
height: 500px;
background-color: rgba(0,0,0,0.6);
min-width: 400px;
max-width: 400px;
}
.img{
width: 260px;
height: 100px;
padding-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
}
#paragraph {
align-items: center;
display: flex;
}
#paragraph:nth-of-type(odd) p {
order: 1;
}
#paragraph:nth-of-type(odd) img {
order: 2;
}
p{
font-size: 23px;
letter-spacing: 2px;
}
<div class="text">
<div id="paragraph"><img class="img" src="https://www.gaincontact.com/files/2016/10/Globelanguageshomepage-1.jpg">
<p>1st Paragraph</p>
</div>
<div id="paragraph"><img class="img" src="https://img00.deviantart.net/c3e2/i/2015/136/f/a/rinne_rokudou_rokumon__kyoukai_no_rinne_minimalism_by_greenmapple17-d8tm8om.png">
<p>2nd Paragraph</p>
</div>
<div id="paragraph"><img class="img" src="http://smart-defence.co.uk/wp-content/uploads/2015/03/art.jpg">
<p>3rd Paragraph</p>
</div>
<div id="paragraph"><img class="img" src="https://www.markchadwick.co.uk/wp-content/uploads/2015/03/Spin-Painting-18-1000x643.jpg">
<p>4th Paragraph</p>
</div>
</div>
答案 0 :(得分:-2)
body{
background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding: 40px;
margin: 0;
}
.text {
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(0,0,0,0.6);
}
&#13;
<div class="text">
</div>
&#13;