获取当前背景图像的URL并移交给<href>

Get URL to current background-image and hand over to <a href>

本文关键字：href 背景 图像 URL 获取      更新时间：2023-09-26

我有一个问题，到目前为止我无法弄清楚。我在这里用谷歌搜索和搜索，找到了一些答案，但我无法让它工作。

我想从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>

我对编程很陌生，我的想法已经用完了。

非常感谢您的帮助。

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

小提琴

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

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

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

按照直接的javascript作为你做，获取背景图像将是：

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

var bg = image.style.backgroundImage;

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

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

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

参见：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>

这是一个非 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小提琴演示。

在整个

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>
相关文章：