WordPress Customizer Opacity Slider 将不透明度应用于整个页面，而不仅仅是背景图像

Question

我正在构建一个自定义 WP 主题，并正在努力添加到定制器中。我之前添加了一个背景图像设置，并且正在尝试实现一个不透明度滑块。我查找了如何使用 :before 或 :after 伪类使不透明度正确应用于我的背景图像，但孩子们仍然受到不透明度设置的影响。我的代码有问题吗？我离开了这个网站关于如何格式化我的 html 和 css 的示例：https://scotch.io/quick-tips/how-to-change-a-css-background-images-opacity

HTML：

<div id="bg-image-div" class="image-opacity">
<section id="category-section">
    <div class="container">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1">
                <h2 class="section-title">Section Title</h2>
            </div> 
        </div> 
        <div>
        <p>
        Content Content Content Content Content Content Content Content Content Content Content                   
        </p>
        </div> 
    </div> <!-- /.container -->
</section>
</div> <!-- /.image-opacity -->

CSS：

#bg-image-div {
position: relative;
overflow: hidden;
background: #5C97FF;
}

#bg-image-div:after {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

#category-section {
    z-index: 2;
    position: relative;
}

PHP 添加控制和设置：

function themename_customizer_register( $wp_customize ) { 
// Theme Customizer -- Background Image CSS

$wp_customize->add_section(
    'themename_recipe_category_area',
    array(
            'title'       => __( 'Category Area Image', 'themename' ),
            'priority'    => 30,
            'capability'  => 'edit_theme_options',
            'description' => __( 'Change the background image in the Recipe Category Area of the Home Page', 'themename' ),
    )
);

$wp_customize->add_setting(
    'themename_background_image',
    array(
            'default'      => get_template_directory_uri() . '/images/rustic-bg.jpg',
            'transport'    => 'refresh'
    )
);

$wp_customize->add_control(
    new WP_Customize_Image_Control(
        $wp_customize,
        'themename_background_image',
        array(
                'label'       => __( 'Background Image', 'themename' ),
                'settings'    => 'themename_background_image',
                'section'     => 'themename_recipe_category_area',
                'description' => __( 'Recommended image size is approximately 1650x1650 pixels', 'themename' ),
        )
    )
);

// Theme Customizer -- Background Image CSS Opacity Slider

$wp_customize->add_setting('themename_image_opacity');

$wp_customize->add_control( 'themename_image_opacity',
        array(
            'type' => 'range',
            'priority' => 20,
            'section' => 'themename_recipe_category_area',
            'label' => __( 'Set Background Image Opacity', 'themename' ),
            'description' => '<span style="float: left; margin-top: 10px;">' . __( '&larr; Less', 'themename' ) . '</span><span style="float: right; margin-top: 10px;">' . __( 'More &rarr;',      'themename' ) . '</span>',
            'input_attrs' => array(
                'min' => .1,
                'max' => 1,
                'step' => .1,
                'class' => 'image-opacity',
                'style' => 'width: 100%; padding-top: 0; z-index: 0;',
            ),
        )
);


}
add_action( 'customize_register', 'recipedia_customizer_register' );

PHP/CSS 将样式挂钩到 wp_head：

function themename_customizer_css() {
?>

<style>

    /*==  Style from The Customizer Colors Section - Categories Section Background Image ==*/

    <?php if(get_theme_mod('themename_recipe_category_area')) : ?>
    #bg-image-div {
        background-image: url("<?php echo get_theme_mod( 'recipedia_recipe_category_area' ) ?>");
    }

    <?php else : ?>#bg-image-div {
        background-image: url("<?php echo get_template_directory_uri() . '/images/rustic-bg.jpg'; ?>");
    }

    <?php endif;
    ?>

    /*== Style from The Theme Customizer Background Image - Adjusting Opacity   ==*/

    .image-opacity {
        opacity: <?php echo get_theme_mod('themename_image_opacity') ?>;
    }


</style>
<?php
}
add_action( 'wp_head', 'recipedia_customizer_css' );

Answer 1

wp_head 操作挂钩中图像不透明度的 CSS 输出看起来不正确。应该是

.image-opacity:after { ... }

虽然，为了配合你原来的风格，最好还是随随便便

#bg-image-div:after { ... }

用于 opacity 属性，这样如果您以后必须对其进行编辑，就不会混淆 CSS ID 或类选择器的使用。

我实际上已经使用了这种技术——来自同一个文章来源——而且效果很好。