Question

我是bootstrap的新手，我只是想创建图像，然后我就有了标题和按钮。

有人可以帮我解决这个问题吗？

谢谢。

Answer 1

您的positioning只是有点不对...您的按钮位置exports.defineTags = function (dictionary) { dictionary.defineTag("service", { mustHaveValue: true, canHaveType: false, canHaveName: true, onTagged: function (doclet, tag) { doclet.service = tag.value; } }); };使按钮离开了窗口。请使用bottom: 5rem;，就像使用标题一样：

＆＃13;

top

＆＃13;

.block-hero {
  display: block;
  position: relative;
}
.block-hero-img {
  display: block;
  position: absolute;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}
.block-hero-headline {
  background: rgba(0, 0, 0, 0.9);
  padding: 1rem;
  transition: all 0.2s ease;
  position: absolute;
  top: 3rem;
  left: 1rem;
  max-width: 100%;
}
.mybutton {
  padding: 1rem;
  display: block;
  position: absolute;
  top: 10rem;
  left: 1rem;
  max-width: 100%;
}
h1 {
  font-weight: 700;
  margin: 15px 0;
}

＆＃13;

Answer 2

您可以轻松地从cms更改背景图像。为什么要使用图片标签？例如，如果图像来自php，你可以做类似的事情。

<div class="row block-hero" style="background-image:url('<?php echo $imageSource;?>')">
</div>

覆盖图像与文本btn

2 个答案: