Question

我正在制作一个wordpress主题，为了跟上当前的趋势，我在主题定制器中添加了选项。

我创建的其中一个选项是背景图片上传器，图片上传甚至插入我的网站 - 但是我使用jQuery来实时显示这些更改并且我已经有点卡住了。

这是我的JS用于实时工作的图像上传器：

// BACKGROUND IMAGE
wp.customize( 'front_page_background_image', function( value ) {
    value.bind( function( to ) {
        $( '#banner' ).attr( 'style', function() {
            return 'background-image' : to ;});
    } );
});

然而，这只是返回以下html：

<section id="banner" style="background-image"></section>

我无法弄清楚如何以“风格”来获取我的形象的网址＆＃39;参数。我知道我可以使用这样的代码调用url：

// BACKGROUND IMAGE
wp.customize( 'front_page_background_image', function( value ) {
    value.bind( function( to ) {
        $( '#banner' ).html( to );
    } );
});

这将输出

<section id="banner">[URL OF MY UPLOADED IMAGE]</section>

所以我知道可以获得网址，我只是无法在正确的地方获取网址。我需要它说的是

<section id="banner" style="background-image:url=([URL OF MY UPLOADED IMAGE]);"></section>

Answer 1

用"url()"包裹网址。请注意，使用$.attr会导致现有样式丢失。在以下示例中，现有边框丢失http://jsfiddle.net/mendesjuan/s9KTp/1/

$('#banner').attr('style', 'background-image:url(' +to+ ')');

您应该使用$.css而不是$ .attr，这样您就不必担心会覆盖现有的样式。见http://jsfiddle.net/mendesjuan/s9KTp/2/

$('#banner').css('background-image', "url("+ to +")");

jQuery将背景图片网址更改为上传的图片

1 个答案: