Question

我正在使用bootstrap4框架构建此页面，并且我想在背景上添加蓝色，以携带＆＃34; globe-img＆＃34;类。我尝试将内容包装在内部div（叠加）中，但这又完全打破了网格布局。是否有可能应用背景颜色而不添加额外的标记。

＆＃13;

html, body {
  margin:0;
  padding:0;
}
.globe-img {
  background: url('http://binarytheme.com/BTlivedemos/2014/10/20/blue-landing/assets/img/earth.jpg') no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
  min-height: 400px;
}
.smicon {
  border: 1px solid #fff;
  height: 80px;
  width: 80px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

</head>
<body>
  <div class="container-fluid globe-img">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h1 class="text-center text-white text-uppercase pt-5 pb-4">Design my way</h1>
            <p class="text-white">Nunc at viverra risus. In euismod quam ac dictum varius. Nunc at viverra risus. In euismod quam ac dictum varius. Nunc at viverra risus. In euismod quam ac dictum varius. Nunc at viverra risus.</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 d-flex flex-column align-items-center">
            <i class="fa fa-android fa-3x text-white smicon rounded-circle d-flex align-items-center justify-content-center my-5" aria-hidden="true"></i>
            <p class="text-white">Android</p>
        </div>
        <div class="col-md-6">
            <img class="img-fluid" src="http://binarytheme.com/BTlivedemos/2014/10/20/blue-landing/assets/img/new-i.jpg" alt="">
        </div>
        <div class="col-md-3 d-flex flex-column align-items-center">
            <i class="fa fa-apple fa-3x text-white smicon rounded-circle d-flex align-items-center justify-content-center my-5" aria-hidden="true"></i>
            <p class="text-white">Iphone</p>
        </div>
    </div>
</div>
</body>
</html>

＆＃13;

Answer 1

如果你必须在globe-img类中添加蓝色背景，只需添加blue bg，如下所示::

.globe-img {
  background: blue url('http://binarytheme.com/BTlivedemos/2014/10/20/blue-landing/assets/img/earth.jpg') no-repeat center center;
}

特别是不需要添加任何内部div /元素来添加蓝色背景。

Answer 2

确定！

只需以这种方式添加叠加层::

.globe-img {position: relative;}

.globe-img::before {
 content: ""; 
 background-color: rgba(11, 135, 224, 0.95);
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.globe-img > div {
 position: relative;
 z-index: 10;
}

将背景颜色应用于具有背景图像的容器

2 个答案: