覆盖css

Question

我如何在CSS中设计具有叠加效果的背景图像，如此示例图像。

这里的代码。我想将tour类添加到背景图像和叠加效果中。

<div class="tour">
    <div class="container">
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>
    </div>
</div>

Answer 1

您可以使用此代码

<强> HTML

<div id="wrapper">
    <img src="image-file" alt="">
    <div class="overlay"></div>
</div>

<强> CSS

#wrapper {
    position: relative;
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
}

Answer 2

你应该在问题中添加更多信息，但这是你想要的吗？

CSS for this：

.background {
  background:url('BackgroundImage.png');
}

.layer {
  background-color: rgba(248, 247, 216, 0.7)
  width: 100%;
  height: 100%;
}

HTML for this：

<div class="background">
  <div class="layer">
  </div>

希望有所帮助：）

Answer 3

它是这样的：

Option Explicit

Public Function DetectConstantInRange(rng As Range) As Boolean

    Dim rngCell As Range
    Dim blnResult As Boolean

    'assume false
    blnResult = False

    'iterate each cell in range
    For Each rngCell In rng
        'cell with value and no formula is constant
        If Not rngCell.HasFormula And rngCell.Value <> vbEmpty Then
            blnResult = True
            'at least one constant so exit
            Exit For
        End If
    Next rngCell

    'return result        
    DetectConstantInRange = blnResult

End Function

Answer 4

尝试以下代码

<强> HTML

<div class="img-wrapper">
    <img src=".." />
</div>

<强>风格

.img-wrapper {
    position: relative;
}
.img-wrapper:after {
    content: "";
    background-color: rgba(37,131,173,0.5);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}