如何制作没有效果的灰度叠加文字？ HTML CSS [重复]答案

【问题标题】：How to make a grayscale without effect overlay text? HTML CSS [duplicate]如何制作没有效果的灰度叠加文字？ HTML CSS [重复]
【发布时间】：2023-02-04 23:49:41
【问题描述】：

我是这类代码的新手，想在不影响叠加文本的情况下对背景图像进行灰度化

HTML代码

<div class="top">   
            <div class="titleMain">
                <div class="titleMainText">
                    <h1>Check out our Store</h1>
                </div>
                <a href="*" class="storeButton">Shop</a>
            </div>
        </div>

CSS代码

.top {
    padding-bottom: 500px;
    padding-top: 50px;
    border-bottom: 10px solid;
    background-image: url('../Images/46162.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

.titleMain {
    margin-left: 5%;
    margin-right: 70%;
    margin-top: 5%;
    padding-bottom: 40px;
    font-size: xx-large;
    filter: none;
}

.titleMainText {
    margin-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bolder;
    color: black;
}

我想在不影响前面文字的情况下对背景图像进行灰度化，但找不到任何相关信息。

【问题讨论】：

标签： html css

【解决方案1】：

尝试这个：

.top {
    padding-bottom: 500px;
    padding-top: 50px;
    border-bottom: 10px solid;
    background-image: linear-gradient(black, white),url('https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg?region=0,0,1920,1080&width=1200');
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: saturation;
}

.titleMain {
    margin-left: 5%;
    margin-right: 70%;
    margin-top: 5%;
    padding-bottom: 40px;
    font-size: xx-large;
    filter: none;
}

.titleMainText {
    margin-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bolder;
    color: black;
}

    <div class="top">   
        <div class="titleMain">
            <div class="titleMainText">
                <h1>Check out our Store</h1>
            </div>
            <a href="*" class="storeButton">Shop</a>
        </div>
    </div>

【讨论】：

让我知道这是否是您所需要的。

【解决方案2】：

您可以使用 filter 属性使背景灰度化，并使用 before pseudo before 属性来应用灰度而不影响叠加文字。

只需将 filter 属性添加到 CSS 中的以下类：

.top {
      position: relative;
      padding-bottom: 500px;
      padding-top: 50px;
      border-bottom: 10px solid;

 }
.top::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  filter: grayscale(100%);
  background-image: url('../Images/46162.webp');
 background-repeat: no-repeat;
 background-size: cover;
 z-index: -1;
}

【讨论】：