再次在 wordpress 中添加自定义背景图像答案

【问题标题】：add a custom-background-image in wordpress once more再次在 wordpress 中添加自定义背景图像
【发布时间】：2013-10-21 02:40:04
【问题描述】：

我为我的 wordpress 主题启用了自定义背景，如下所示：

add_theme_support('custom-background', array(
    'default-color' => 'FFF',
    'default-image' => get_template_directory_uri() . '/img/bg.jpg'
));

比我抢body的类“.custom-background”，因为我想改变背景大小：

body.custom-background {
    background-attachment: fixed!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}

我将它定位为绝对的唯一原因是，因为我想添加一个具有相同背景属性但宽度为 1000 像素和居中边距（0 自动）的其他背景，以使用 css-filters 模糊此部分：

body.custom-background:before {
    content: "";
    background-image: url(""); //here he should takes the custom background-image (of body.custom-background)
    background-attachment: fixed!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    height: 100%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 1000px;
    position: fixed;
    z-index: -1;
    filter: blur(10px);
}

当然 wp 不知道哪个是背景图像......那么，我该如何解决这个问题 - 他再次将自定义背景图像带到 :before 选择器？

希望你明白我的意思。

【问题讨论】：

标签： php css wordpress wordpress-theming background-image

【解决方案1】：

可以在header.php中编写如下代码

<?php $background = set_url_scheme( get_background_image() ); ?>  
<style>  
  body.custom-background:before {  
  content: "";  
  background-image: url("<?php print $background; ?>");  
  background-attachment: fixed!important;  
  background-position: center center!important;  
  background-repeat: no-repeat!important;  
  background-size: cover!important;  
  height: 100%;  
  right: 0;  
  left: 0;  
  margin: 0 auto;  
  width: 1000px;  
  position: fixed;  
  z-index: -1;  
  filter: blur(10px);  
 }  
</style>

这会起作用...

【讨论】：