如何在 Bulma CSS 中内联放置背景图像和文本?
How to place background image and text inline in Bulma CSS?
我正在创建投资组合页面。我正在使用布尔玛。我想要的是内嵌背景图片和文字。
代码如下:
<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>
在尝试上面的代码后,我实现了我想要的东西。然而,在减小视口尺寸时,背景图像和文本出现在其他图像之上,可能它们在垂直和水平方向上居中。请帮我。如何将背景图片和文本并排放置而不会出现任何错误?
这是错误:
根据我的想法,您使用了两次容器 class,这就是您遇到此错误的原因。您要将背景颜色 red 更改为 img 吗?
想法
- 左侧文本和右侧图片
- 给所有相同的背景颜色
例子
(图片比例约为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>
提示
我正在创建投资组合页面。我正在使用布尔玛。我想要的是内嵌背景图片和文字。
代码如下:
<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>
在尝试上面的代码后,我实现了我想要的东西。然而,在减小视口尺寸时,背景图像和文本出现在其他图像之上,可能它们在垂直和水平方向上居中。请帮我。如何将背景图片和文本并排放置而不会出现任何错误?
这是错误:
根据我的想法,您使用了两次容器 class,这就是您遇到此错误的原因。您要将背景颜色 red 更改为 img 吗?
想法
- 左侧文本和右侧图片
- 给所有相同的背景颜色
例子
(图片比例约为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>
提示