如何在 Bulma CSS 中嵌入背景图像和文本？答案

【问题标题】：How to place background image and text inline in Bulma CSS?如何在 Bulma CSS 中嵌入背景图像和文本？
【发布时间】：2017-12-24 13:08:29
【问题描述】：

我正在创建一个投资组合页面。我正在使用布尔玛。我想要的是将背景图像和文本内联。

代码如下：

<section class="hero is-halfheight upload-descr" style = "height: 37em">
        <div class="hero-body">     
            <div class="container">
                <div class="clearfix"></div>
                <hr class = "rm-descr-bar" style = "float: left;"></hr>
                <div class="clearfix"></div>
                <h1 class = "title">
                    Loren Ipsum
                </h1>
                <div class="content rm-has-medium-size">
                    <p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea<br />ea commodo consequat. Duis aute irure dolor.</p>
                </div>
            </div>
        </div>
</section>

我想要的是在<div class = "container"> 中向右移动的背景图像。但是它会被裁剪。我搞砸了容器的高度和宽度。这影响了容器内的文本，即它不再垂直居中。请帮忙。

我想实现这个：

我试过了：

<section class="hero is-halfheight upload-descr section" style = "height: 37em">
        <div class="hero-body container" style = "background: url('/img/pic.png') no-repeat right; background-size: contain;">     
            <div class="container">
                <div class="clearfix"></div>
                <hr class = "rm-descr-bar" style = "float: left;"></hr>
                <div class="clearfix"></div>
                <h1 class = "title">
                    Loren Ipsum
                </h1>
                <div class="content rm-has-medium-size">
                    <p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea<br />ea commodo consequat. Duis aute irure dolor.</p>
                </div>
            </div>
        </div>
</section>

在尝试了上面的代码后，我实现了我想要的东西。但是，在减小视口大小时，背景图像和文本出现在其他上方，可能它们垂直和水平居中。请帮我。如何将背景图片和文本并排放置而不会出现任何错误？

这是错误：

【问题讨论】：

为什么不将包含背景图像的 div 容器和具有文本部分的 div 容器作为同级容器分开？这样，您可以在部分上使用 display:flex，它们不会重叠，并且会在您视口的所有分辨率下并排对齐。
没有删除，试试background-size:cover;
你想要整页吗？
没有@Liamm12。可能是 37em div。
你想要这样的背景吗，我可以把文字改成你想要的样子jsfiddle.net/Liamm12/h006func

标签： html css bulma

【解决方案1】：

想法

左侧文字和右侧图片
给所有相同的背景颜色

示例

（图片比例约为4:3。根据需要更改CSS。）

.mySection {
  background-color: #F93122;
  color: white;
  border: 1px solid white;
}

.myHero {
  padding: 50px 0 50px 75px;
}

.myHero .hr {
  display: inline-block;
  width: 100px;
  height: 15px;
  background: white;
  border-radius: 20px;
  margin-bottom: 15px;
}

.myHero h1 {
  font-size: 50px
}

@media(max-width: 768px) {
  .myHero {
    padding: 50px !important;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<section class="mySection">
  <div class="columns is-vcentered">
    <div class="column is-5-tablet is-5-desktop">
      <div class="myHero">
        <div class="hr"></div>
        <h1>Loren Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta a et ipsa voluptates in velit rem minus nihil, blanditiis nisi, quidem tempore quos qui quas. Blanditiis hic dolorem fugiat? Blanditiis!</p>
      </div>
    </div>
    <div class="column is-7-tablet is-7-desktop">
      <figure class="image is4by3">
        <img src="http://i64.tinypic.com/29gedzq.png">
      </figure>
    </div>
  </div>
</section>

提示

Bulma#image

【讨论】：

【解决方案2】：

根据我的想法，您使用了两次容器类，这就是您遇到此错误的原因。你想改变背景颜色 red 和 img 吗？

【讨论】：