如何在Bulma CSS中内嵌背景图像和文本？

Question

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

以下是代码：

<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> 右移。然而它被裁剪了。我搞砸了容器的高度和宽度。这影响了容器内的文本，即它不再垂直居中。请帮忙。

我想实现这个目标： focusPolicy

我试过了：

Boolean([]) // => true

在尝试上面的代码后，我实现了我想要的东西。但是，在减小视口大小时，背景图像和文本会出现在其他视图上，也许它们会以垂直和水平为中心。请帮我。如何在没有任何错误的情况下将背景图像和文本放在一起？

这是错误：

Answer 1

观

• 左侧文字，右侧是图片
• 提供所有相同的背景颜色

实施例

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>提示

Bulma#image

Answer 2

根据我的想法你使用了两次容器类，这就是你得到这个bug的原因。你想要改变背景颜色红色和img吗？