文章/答案/技术大牛

发布

社区首页 >问答首页 >将文本放置在背景照片上方

问将文本放置在背景照片上方
EN

Stack Overflow用户

提问于 2019-07-26 19:16:03

回答 1查看 69关注 0票数 0

我正在做一个网站，我正在努力使它响应性。在较大的屏幕上，左侧有一个图像，右侧有一些文本，这可以很好地工作，但在较小的屏幕上，我希望照片放在文本的下方。

为了达到预期的效果，我决定将照片设置为背景照片，并摆弄填充，以便按我想要的方式放置文本。一开始，我把照片放在一个单独的专栏里，但我在这里看到了一个问题，那就是使用背景照片应该更好。这在600px以上的屏幕上很好，但在600px以下，文本会中断并垂直填充屏幕的更多部分，这意味着它将与照片重叠(我将包含此屏幕截图)。

.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%;
}

我希望照片在文本下方对齐，但由于我有两个框，一个在较大屏幕上显示图像和文字，另一个在较大屏幕上显示图像和文字，我发现这相当困难，因为我希望这两个框都在小屏幕上显示照片和文字。

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2019-07-26 19:46:11

<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%Width为每个部分，对于较大的屏幕使图像向右拉.so，文本将出现在图像的左侧上，而对于较小的屏幕，图像将在顶部，文本将在底部。

检查下面的代码片段

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57218948

复制

相似问题

问将文本放置在背景照片上方
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本放置在背景照片上方EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本放置在背景照片上方
EN