使背景图像保持静止

时间:2018-04-02 10:43:41

标签: html css background background-image

我想要我的背景图片,当渲染浏览器更大并显示整个文本时,它会变大并保持文本居中,当浏览器很小并且不显示时,保持静止并居中显示文本整个文本(水平)。

欢迎任何帮助,

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>

1 个答案:

答案 0 :(得分:-2)

&#13;
&#13;
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;
&#13;
&#13;