时间戳

首页 > 解决方案 > 如何将背景图像设置为仅屏幕的左半部分

html - 如何将背景图像设置为仅屏幕的左半部分

问题描述

我的目标是创建一个页面，其中屏幕左侧有一个图像，右侧有一个白色文本区域。如果文本区域对于屏幕来说太长，则只有该区域应该滚动。我已经对此进行了一段时间的研究，但找不到任何有关如何执行此操作的示例。

我用 CSS 网格尝试了一些不同的东西，但似乎效果不佳： https ://codepen.io/aysong/pen/JjXoebx?editors=1100

这个问题似乎是柱的高度取决于

p class=item2

我还尝试只使用 CSS 并摆弄背景大小。但是如果不设置高度（例如下面），图像就不会出现。

height:1000px;

https://codepen.io/aysong/pen/poyvQEW

我正在使用这个网站作为灵感，您可以在其中看到左侧的图像和右侧的文本。如果右侧有足够的文本，我只希望那一侧滚动并保持左侧不变，我知道可以使用下面的代码，我只是还没有让背景图像工作。

overflow: auto;

标签： htmlcsstwitter-bootstrap

解决方案

这是使用 CSS Flexbox 的方法：https ://codepen.io/xenvi/pen/JjXoeWz

我所做的是将背景框和文本框分开，并将它们都包装在父容器中。向父容器添加 'display: flex' 会自动以行格式包装子容器（因此我们的 2 个 div 现在将彼此相邻）。我还定义了父 div 的高度，以使用“100vh”覆盖全屏。

对于孩子们，为了使每个框占据页面的一半，我在两个 div 中都添加了“flex: 1”。这意味着两个孩子将平等地占据父容器的整个宽度，即 50%。您可以查找更多关于 flexbox 类的信息以供参考。

最后，将 overflow: auto 添加到您的文本 div 中，这样如果内容溢出，则只有文本框会滚动。

body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.bg-image { 
  /* The image used */
  background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(11).jpg");

  /* Center and scale the image nicely */
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
  flex: 1;
  height: 100%;
}

.content {
  flex: 1;
  height: 100%;
  overflow: auto;
}
<section class="container">
  <div class="bg-image">
  </div>
  <div class="content">
  <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p>
    <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p>
    <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p>
    <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p>
    <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p>
    <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p>
    <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p>
    <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scroled to top), and that it scales nicely on all screen sizes.</p>
  </div>

</section>

推荐阅读