html - 如何在不影响子元素的情况下更改页面构建器 div 中 bg img 的亮度并更改悬停时的亮度

Question

请注意: 我的客户正在使用 Wordpress 的页面构建器插件，因此我们无法更改 html 的结构，只能对 css 进行修改!

我需要在不影响子元素中的文本的情况下将背景图像的亮度降低到 40%。过滤器或背景 rgba 都是可以接受的。悬停时，亮度需要更改为 100%。

这是 html:

<div class="wpb_column vc_column_container vc_col-sm-6 vc_col-has-fill">
    <div class="vc_column-inner vc_custom_1493898173136">
        <div class="wpb_wrapper">
            <div class="wpb_text_column wpb_content_element">
                <div class="wpb_wrapper">
                    <p>OUR TITLE</p>
                </div>
            </div>
            <div class="wpb_text_column wpb_content_element ">
                <div class="wpb_wrapper">
                    <p>OUR TEXT</p>
                </div>
            </div>
         </div>
    </div>
</div>

这是我们需要修改的 CSS 的摘录:

.wpb_column{position:relative;}
.vc_column_container{padding-left:0;padding-right:0;}
.vc_col-sm-6{float:left;}
.vc_column-inner{padding:100px 20%;background:url(http://ourdomain.com/bild.jpg)}

我很确定我们可以使用 :before 和 :after 伪元素来解决这个问题，但到目前为止我尝试过的一切都没有成功。

我知道那里有很多类似的问题，但请不要将其标记为重复，因为页面构建器 html 将其作为特例!

在此先感谢您的帮助!

Answer 1

悬停背景图像亮度

在自定义 css 中添加下面的类

.vc_column-inner:hover {
         -webkit-filter: brightness(1.3);
    -moz-filter: brightness(1.3);
    -o-filter:  brightness(1.3);
    -ms-filter:  brightness(1.3);
    }