如何在视差背景图像中使div居中

Kawsar_Ahmed

我想水平和垂直居中div与视差背景图像。我试过bootstrap 4d-blockmx-autotext-center它水平居中,但不垂直居中。如何将其垂直居中?

.parallax_bg {
  background: url(assets/img/corinne-kutz-211251.jpg);
  background-size: cover;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}

.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

.parallax_text > p {
  font-size: 20px;
}
<section data-stellar-background-ratio="0.5" class="parallax parallax_bg text-center mx-auto d-block">
  <div class="parallax_text">
    <h3><em>Venenatis Nisl Porta</em></h3>
    <p>Lorem vestibulum gravida ipsum non velit aliquam</p>
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
  </div>
</section>

布万

只需申请position: relativeparallax课程,然后将以下CSS应用于该parallax_text课程:

.parallax_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在 div 中使用背景图像?

如何在QWidget中居中背景图像

如何在div中居中(背景)图像?

如何在不使用背景图像的情况下创建视差效果?

如何在React.JS中使用``onclick''功能更改特定div的背景图像

如何在Javascript中使用条件更改Div的背景图像

如何居中裁剪全屏背景图像

如何在TImage上显示Div背景图像

CSS:如何在div中模糊背景图像?

如何在div元素上转换多个背景图像?

如何在透明背景后面的FloatingActionButton中使图像居中?

视差CSS背景图像稍微移动

如何在HTML元素的居中背景图像上添加填充

如何在不拉伸的情况下将背景图像居中放置在UIView中

如何在 HTML 电子邮件模板中为 OUTLOOK 的背景图像居中对齐文本?

使用jQuery将div与背景图像居中在屏幕中心

视差背景图片适合div

如何使div背景图像响应?

如何使用填充垂直/水平居中 CSS 背景图像

如何居中对齐JPanel中的背景图像

如何使背景图像居中而不降低其质量?

如何在媒体查询中使用 API 返回的图像作为背景图像?

如何在css3中使用图像集设置背景图像?

如何在CSS中使用图标作为“背景图像”而不是图像

如何在flutter中使用拾取的图像作为背景图像?

不使用css背景属性的视差背景图像滚动

如何在旋转图像CSS或Javascript时使背景图像填充空白(在div上)?

如何在代码中使用毕加索设置背景图像

如何在标记中使用绝对路径添加背景图像