Question

一直在努力尝试将背景图片添加到我的Bootstrap网站。我试图将它夹在两个现有部分之间。

在使用背景图像检查许多主页时，它们具有类以及HTML和CSS中的样式代码。

这是我尝试添加的类型，不包括滑块 http://themesquared.com/flathost（div类是jumbotron masthead） http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg

然后将一些叠加文字添加到背景图像中，我是否需要按此顺序：容器，行类，背景图像类，叠加文本类与列位

CSS和HTML都需要带有背景图像的样式吗？

<div class="solution5">
<div class="container">
<div class="row">
<div class="col-12">
<div class="col-6 push-1"><a href="/link1">
<h1>Link text</h1><h2>2nd text block</h2>
<a href="/link2" class="Link2">Up to 40% off</a>
<a href="/link3" class="Link3">Discover more</a>
<a href="/link4" class="col-3 push-1"><ul class="Link4"><li>Free Bag</li>     <li>Free Delivery</li></ul></a>
</div>
</div>
</div>
</div>
</div>

.solution5 {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
z-index: 20;
background-image: url(http://example.com/img/solution5.jpg);
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-position: 50% 0%;
background-repeat: no-repeat;

Answer 1

你的意思是这样的：

.solution5 {
  background: url('http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg');
  background-size: cover;
}

演示 - ＆gt; http://jsfiddle.net/mmcgaweb/

关于来自MDN的background-size: cover;：

封面：与contains相反的关键字。尽可能大地缩放图像并保持图像宽高比（图像不会被压扁了）。图像“覆盖”整个宽度或高度容器。当图像和容器具有不同的尺寸时，图像被剪切为左/右或上/下。

将背景图像作为新部分添加到Bootstrap站点

1 个答案: