如何使灰度没有效果覆盖文本？HTML CSS [复制]

dzjeubhm 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(107)

- 此问题在此处已有答案**：

How to apply a CSS filter to a background image（22个答案）
昨天关门了。
我是这类代码的新手，希望在不影响覆盖文本的情况下对背景图像进行灰度处理
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;
}

我想灰度背景图像，而不影响前面的文字，但找不到任何关于它。

css

来源：https://stackoverflow.com/questions/75345915/how-to-make-a-grayscale-without-effect-overlay-text-html-css

2条答案

按热度按时间

2izufjch1#

试试这个：

.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>

赞(0）回复(0）举报 2023-02-06

x8goxv8g2#

可以使用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;
}

赞(0）回复(0）举报 2023-02-06

我来回答

如何使灰度没有效果覆盖文本？HTML CSS [复制]

2条答案

相关问题

热门标签

最新问答