一直在努力尝试添加一个背景图像到我的引导网站。我正试着把它夹在两个现有的部分之间。
当检查许多带有背景图像的主页时,他们在HTML和CSS中既有类,也有样式代码。
这就是我要添加的东西类型,不包括滑块http://themesquared.com/flathost(div类是jumbotron刊头)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;
你的意思是这样:
.solution5 {
background: url('http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg');
background-size: cover;
}
演示->http://jsfidle.net/mmcgaweb/
关于来自MDN的background-size:cover
:
cover:与contain相反的关键字。缩放图像尽可能大,并保持图像纵横比(图像不会被压扁)。图像“覆盖”容器的整个宽度或高度。当图像和容器具有不同的尺寸时,图像被剪切为左/右或顶部/底部。