如何在 Bulma CSS 中内联放置背景图像和文本？

Question

我正在创建投资组合页面。我正在使用布尔玛。我想要的是内嵌背景图片和文字。

代码如下：

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

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

这是错误：

Answer 1

根据我的想法，您使用了两次容器 class，这就是您遇到此错误的原因。您要将背景颜色 red 更改为 img 吗？

Answer 2

想法

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

例子

（图片比例约为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

如何在 Bulma CSS 中内联放置背景图像和文本？

How to place background image and text inline in Bulma CSS?

html

css

bulma

想法

例子