【覚書】cssだけで背景画像を暗く、文字は白いまま、の作り方

こういうのです↓

毎回悩むので覚書として

html

  <div class="row">
          <div class="col menuphoto" id="menu-service"><a href="#">
              <div class="topmenu">
                <h2>SERVICE<span>サービス内容</span></h2>
              </div>
            </a></div>
          <div class="col menuphoto" id="menu-facility">
            <div class="topmenu">
              <h2>FACILITY<span>主要設備</span></h2>
            </div>
          </div>

          <div class="col menuphoto" id="menu-aboutus">
            <div class="topmenu">
              <h2>ABOUT US<span>会社概要・お問い合わせ</span></h2>
            </div>
          </div>
        </div>

scss

.menuphoto {
    background-image: url(img/slide03.jpg);
    background-size: cover;
    position: relative;
    height: 100%;
    transition: 0.3s;
    &::before {
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: " ";
        height: 100%;　// ここがミソ
        width: 100%;　// ここがミソ
    }

    &:hover {
        opacity: 0.8;
    }
}

#menu-facility {
    background-image: url(img/slide01.jpg);
}
#menu-aboutus {
    background-image: url(img/slide02.jpg);
}

.topmenu {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: white;
    text-align: center;
    z-index: 10;
    padding: 2rem 1rem;
    font-weight: bold;
    h2 {
        line-height: 1.7;
        font-size: 1.5rem;
        letter-spacing: 0.15rem;
        font-weight: bold;
        span {
            font-size: 0.9rem;
            display: block;
            font-weight: normal;
        }
    }
}

これで忘れてもだいじょうぶ。