时间戳

首页 > 解决方案 > Position text above background photo

html - Position text above background photo

问题描述

I'm making a website and I am working on making it responsive. On larger screens there is an image on the left side, and some text on the right side, which works fine, but with smaller screen I want the photo to be placed below the text.

To achieve the desired behavior, I decided to make the photos the background photo, and mess around with the padding in order to place the text like I wanted. In the beginning I had put the photo in a separate column, but I read in a question on here that it should be better to use background photos. This is fine on screens above and around 600px, but below this the text breaks and fills more of the screen vertically, meaning it will overlap the photo (I'll include a screenshot of this). Problem photo

.box-1 {
  background-image: url('https://via.placeholder.com/250.jpg?text=Om+os');
  background-position: bottom;
  padding-left: 15px;
  padding-top: 25px;
  padding-bottom: 500px;
  margin-bottom: 10%;
}

I want the photo to align below the text, but since I have two boxes, one as described with an image on the left and text on the right on larger screens, and one with the image on the right and text on the left, I find this rather difficult, since I want both of them to have the photo on top and text below on small screens.

标签： htmlcsstwitter-bootstrap

解决方案

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>


  <div class="container">
  <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 pull-right">
                        <img src="https://dummyimage.com/600x400/000/fff" class="thumbnail" alt="History Image">
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                           <p>
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                           
                           </p>
                </div>
    </div>
</div>

</body>
</html>

您可以为此使用网格布局。在一行内，您可以为每个部分提供50% 的宽度，对于较大的屏幕，使图像向右拉。这样文本将出现在图像的左侧，对于较小的屏幕，图像将在顶部文本将在底部。

检查以下代码段

<div class="row">
     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 pull-right">
            <img src="./images/image.png" class="thumbnail" alt=" Image">
      </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <div class="historyHeader title">
                 YOUR TEXT COME HERE
             </div>
        </div>
   </div>

推荐阅读