Question

如果我调整屏幕大小，我的文字将落在背景图像的底部。这是html和css。我一直在寻找并尝试按照推荐的方法处理绝对/相对位置，但文字仍然不正确。任何帮助，将不胜感激。

<div id="stage">
<a><%= image_tag "5.jpg" %></a>
<a><%= image_tag "6.jpg" %></a>
<a><%= image_tag "7.png" %></a>
<a><%= image_tag "8.jpg" %></a>
<div id="banner-saying">"On a hike, the days pass with 
the wind, the sun, the stars; movement is powered by a 
belly full of food and water, not a noxious tankful of 
fossil fuels. On a hike, you're less a job title and more 
a human being. A periodic hike not only stretches the 
limbs but also reminds us: Wow, there's a big old world 
out there."
</div>
</div>


#stage {
  margin: 1em auto;
  width: 100%;
  height: 100vh;
  margin-bottom: 230px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#stage a {
  position: absolute;
  width: inherit; /* Added */
  height: inherit; /* Added */
}

#stage a img {
  position: relative;
  border: 1px solid #ccc;
  background: #fff;
  width: inherit; /* Added */
  height: inherit; /* Added */
}

#stage a:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 3s;
  animation-duration: 1s;
  z-index: 20;
}

#stage a:nth-of-type(2) {
  z-index: 10;
}

#stage a:nth-of-type(n+3) {
  display: none;
}

@keyframes fader {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.0;
  }
}

#banner-saying {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 14px;
  left: 10px;
  top: 770px;
  font-family: "Reenie Beanie", "Comic Sans MS", cursive, sans-serif;
;}

如果您有这么远的话，感谢您的阅读。：）

Answer 1

是的，所以不要使用实际的图像作为背景。将图像用作背景的最佳方法是使用CSS background-image属性。

W3Schools对此有一个很好的文档：https://www.w3schools.com/cssref/pr_background-image.asp

基本思想是设置文本所在的div的背景图像。但是还有许多其他可能性。

我已经创建了一个供您使用的演示（JSFiddle：https://jsfiddle.net/sx6bqpju/2/）：

<HTML>

  <body>
    <div id="stage">
      Cupcake ipsum dolor sit amet powder. Cookie fruitcake I love marzipan jujubes carrot cake sweet toffee. Cupcake jelly beans I love muffin macaroon chupa chups cupcake sweet oat cake. Chupa chups gingerbread powder jujubes chupa chups chocolate cake chocolate. Oat cake I love jelly gummies. I love chocolate cake sugar plum tootsie roll chocolate I love cake lollipop cotton candy. Sesame snaps donut I love lollipop liquorice I love chocolate croissant cotton candy. Chocolate chocolate bar dessert croissant I love. I love bonbon powder gingerbread halvah gummi bears bear claw. Pastry ice cream croissant cotton candy topping I love. Cake jelly beans jelly-o sesame snaps bear claw gummies pastry. Marzipan macaroon muffin biscuit pastry macaroon jujubes macaroon. I love gingerbread sweet candy canes cookie ice cream chocolate bar dessert I love. Macaroon oat cake dragée I love oat cake.

Sugar plum muffin I love topping cheesecake sesame snaps. Tart wafer croissant candy canes I love biscuit dragée fruitcake macaroon. Candy marzipan powder chocolate cake I love pudding powder. Marshmallow carrot cake brownie croissant toffee apple pie topping. Muffin tart cupcake danish candy fruitcake cheesecake. Jujubes marzipan croissant. Cookie cake jujubes cheesecake marzipan. Cupcake chocolate biscuit cheesecake pudding. Icing I love jelly-o pudding candy canes marshmallow toffee lemon drops danish. Candy canes chupa chups I love toffee. Icing croissant marzipan bonbon tootsie roll apple pie gummies ice cream. Tiramisu fruitcake biscuit. Sweet cotton candy cookie gummies bear claw.

Cookie candy canes toffee. Jelly topping fruitcake I love macaroon liquorice dragée ice cream. Chupa chups tootsie roll I love tart macaroon jelly-o danish. Cheesecake bonbon chocolate toffee marshmallow jujubes sesame snaps powder jujubes. I love I love cookie chocolate toffee jelly I love. Macaroon tiramisu macaroon chupa chups pastry. Cheesecake bear claw cotton candy sweet roll ice cream. Candy chupa chups I love ice cream I love halvah. Biscuit bonbon gummi bears liquorice I love. Ice cream I love liquorice chocolate cake lemon drops sweet caramels. Cake I love gummies cupcake. Icing oat cake jujubes.


    </div>

    <style>
      body {
        background: gray;
        margin: 0px;
        padding: 0px;
        min-height: 100%;
      }

      #stage {
        width: 100%;
        min-height: 100%;
        background-image: url('https://images.pexels.com/photos/724949/pexels-photo-724949.png');
        margin-bottom: 230px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        background-size: cover;
      }
    </style>
  </body>

</HTML>

更改屏幕尺寸时，我的文字无法停留在背景上

1 个答案: