Question

我有一个问题，到目前为止我无法弄清楚。我在Google上搜索并搜索，找到了一些答案，但我无法让它工作。

我想从css中找出当前的背景图片并创建一个下载图片的链接。

到目前为止，这是我简单的代码：

<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">

var image = body.custom-background.css('background-image').replace(/^url\((.*?)\)$/,     '$1');
document.getElementById('link').setAttribute("href",image);


</script>

<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>

我对编程很陌生，而且我的想法已经不多了。

非常感谢你的帮助。

Answer 1

$（'body'）。css（'background-image'）

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

按照你的直接javascript，获取背景图片将是：

var image = document.getElementsByTagName（“body”）[0]

var bg = image.style.backgroundImage;

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

Answer 2

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

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

Answer 3

请参阅：http://jsfiddle.net/p93jx/9/

<!DOCTYPE html>
<html>
<head> 
   <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

   <link rel="stylesheet" type="text/css" href="/css/normalize.css">
   <link rel="stylesheet" type="text/css" href="/css/result-light.css">

   <style type='text/css'>
      body { 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 type='text/javascript'>
      $(document).ready(function(){
         var image = $('body').css('background-image');
         image.match(/url\((.*?)\)/);
         document.getElementById('link').setAttribute("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>

</html>

Answer 4

这是一个非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 Fiddle demo

Answer 5

<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>

FIDDLE

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

Answer 6

在整个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>

获取当前背景图片的网址并移交给<a href=""></a>

6 个答案: