正是它在標題中所說的。如何在 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> ```
uj5u.com熱心網友回復：
你在找這個嗎？看一看。
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/441418.html
標籤：html css WordPress 背景图像 高级自定义字段
上一篇：如果我已將所有組件嵌套在路由器中，如何放置<Login>組件
下一篇：腳本創建的圓圈的隨機移動