0
4

6 回答 6

0

$('body').css('背景图片')

这将使用 jquery 获取您的背景图像值（如果您想要的话），那么您必须在链接中设置您的 href（看起来您正在这样做）。

按照您的操作直接使用 javascript，获取背景图像将是：

var image = document.getElementsByTagName("body")[0]

var bg = image.style.backgroundImage;

这也将获得您在链接中设置的值

于 2012-04-27T13:39:41.297 回答
0

您可能忘记在准备好的 DOM 上执行您的函数（不能确定为简化代码），但通常这应该可以正常工作。

$(function() {
    $('#link').attr('href', $('body.custom-background').css('background-image').replace(/^url\((.*?)\)$/, '$1'));
});
于 2012-04-27T13:41:26.310 回答
0
于 2012-04-27T13:42:17.103 回答
0

这是一个非 jQuery 方法：

function bgLink(elem, from) {
    if (!elem || !from) {
        return false;
    }
    else {
        var bgLink = window.getComputedStyle(from, null).backgroundImage,
            url = bgLink.substring(bgLink.indexOf('http:')).replace(')', '');
        elem.href = url;
        elem.innerHTML = url;
    }
}

bgLink(document.getElementById('downloadBG'), document.getElementById('bgElem'));​

JS 小提琴演示。

于 2012-04-27T13:43:04.133 回答
0 
<head>
    <style type="text/css">
        body.custom-background { background-image: url('http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var image = $(".custom-background").css('background-image').replace(/^url\((.*?)\)$/,     '$1');
        $('#link').attr("href", image);

    });
    </script>
</head>
<body class="custom-background">
    <div id="hide">
        <a id="hidepage">hide page</a>
        <a id="showpage" style="display:none;">show page</a>
    </div>
    <div id="downloadbg">
        <a id="link"><br>Download Background</a>
    </div>
</body>
​

小提琴

要将链接变为下载，而不仅仅是显示图像，您必须执行一些服务器端脚本，将标题设置Content-Disposition为attachment！

于 2012-04-27T13:47:10.767 回答
0

在加载整个 dom 之前，您不能引用 body。所以你应该将你的 javascript 包装在一个 jQuery 函数中： $(function(){ code here!;}); 这与收听 jQuery.ready 事件的结果相同。或者，您可以将 javascript 代码移动到页面底部。

像这样的东西应该可以完成这项工作：

<head>
  <title></title>
    <style type="text/css">
        body{ background: url(@{'http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'}); }
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

        $(function(){
            var image = $('body').css('background-image').replace(/^url\((.*?)\)$/,     '$1');;
            $('#link').attr('href', image);
        });


    </script>

</head>
<body>
    <div id="hide">
        <a id="hidepage">hide page</a>
        <a id="showpage" style="display:none;">show page</a>
    </div>

    <div id="downloadbg">
        <a id="link"><br>Download Background</a>
    </div>

</body>
于 2012-04-27T13:55:08.593 回答