如何在 ACF 背景图像上设置半透明颜色？

Question

正如标题所说。如何在 ACF 背景图像上设置半透明彩色图层？

我正在使用 ACF 图像作为 WP 站点上某个 div 框的 div 背景。我需要将黑色背景颜色设置为图像上方 x% 的透明度，但位于文本下方。

我这辈子都想不通。

我试过调整此页面上的代码 (https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity)，但它破坏了图像并抛出错误代码。

有人知道如何正确地做到这一点吗？我的 css -

    text-align: center;
    color: #ffffff;
    font-size: 2em;
    padding: 2em 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
}

和我的 html -

<div id="residential_page_header_image_text" style="background-image: url(<?php the_field('residential_page_header_image'); ?>);">
<p><?php if( get_field('residential_page_header_image_text_1') ): ?>
    <?php the_field('residential_page_header_image_text_1'); ?>
<?php endif; ?></p>
    <p><?php if( get_field('residential_page_header_image_text_2') ): ?>
    <?php the_field('residential_page_header_image_text_2'); ?>
<?php endif; ?></p>
    </div> ```

Answer 1

你在找这个吗？看一看。

.acf-image {
    width: 200px;
    height: 200px;
    position: relative;
    object-fit: cover;
    overflow: hidden;
}
.acf-image:before{content:''; position:absolute; inset:0; background-color: rgba(0,0,0,.5)}
.acf-image img{object-fit:cover; height:100%; width:100%}
.acf-text{position: absolute; top:50%; transform: translateY(-50%); text-align:center; left:0; right:0}
.acf-text p{color: #fff; font-size:17px;  }

<div class="acf-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png" alt="">
<div class="acf-text">
<p>Lorem Ipsum<p>
</div>
</div>

如何在 ACF 背景图像上设置半透明颜色？

How do I set a semi transparent colour over a ACF background image?

html

css

wordpress

background-image

advanced-custom-fields