WordPress定制器不透明度滑块将不透明度应用于整个页面，而不仅仅是背景图像

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

，以便在以后必须对其进行编辑时，CSS ID 或类选择器的用法之间不会混淆。

我实际上已经使用了这种技术 - 来自同一文章来源 - 它工作得很好。