Javascript jquery，将图像设置为前景图像-所有页面内容的水印效果

我试图使用jQuery在内容id上设置一个新类，该类围绕我的页面内容，使用透明图像创建水印效果。 这将与一个下拉框一起运行，可以删除该下拉框，该下拉框将通知用户站点已存档。下拉框起作用，单击时可以删除

我在向容器添加背景图像或img src时遇到问题。我的工作基础是，这将需要为.archived类设置一个新的.attr 这是正在创建的。一旦创建，我将需要使用z索引将图像置于内容的前面，然后使用指针事件允许用户点击页面 图像并使用页面，同时显示存档的消息。除了通知用户之外，这不会用于任何其他原因，因此，如果用户关闭java并且不关闭，则无所谓 看到了。因此，最好使用jquery答案，而不是服务器端

我已经尝试使用了尽可能多的stackoverflow解决方案，我很感激在其他问题中讨论了这一点，但我无法正确地回答 使用这些答案，让它发挥作用，所以我想我会问

这就是我目前正在处理的问题：

$(document).ready(function () {
  archivedWatermark();
  archivedNotification();
});

function archivedWatermark() {
  $('#container').addClass('archived');
  $('#container').css({
    'background': 
        'url(../assets/images/New-to-Teaching/EnhancingHolisticAspects-Icon-
        Thought-Bubbles.png)',
     'position': 'relative',
     'z-index': '99999',
     'pointer-events': 'all'
});
}

function archivedNotification() {
  archivedMsgRemove();
  archivedMoreInfo();
}

function archivedMsgRemove() {

$('#archived-msg').click(function () {
    $('#archived-site').remove();
    alert('msg removed');
});
}

function archivedMoreInfo(){

var moreInfo = $('#archived-info');

$('#archived-more').click(function(e){

    if (moreInfo.is(':hidden')){
        moreInfo.slideDown('fast');
    } else {
        moreInfo.slideUp('fast');   
}
e.preventDefault();
});
}

以及使用的css：

/*Archived site*/

/* Defined in jquery
.archived {
  content: url(...url-location);
  position: relative;
  z-index: 99999;
  pointer-events: all;
}*/

#archived-site {
  float: left;
  width: 100%;
}
#archived-site .inner {
  padding: 2em 2em 2em 164px;
  overflow: auto;
  background: #EEE url(url.png) no-repeat 18px 50%;
}
#archived-site h2 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  color: #D90000;
}
#archived-site p {
  margin-bottom: 1em;
  line-height: 1.4em;
}
#archived-site p a {
  color: #D90000;
  font-weight: bold;
}
#archived-site li {
  float: left;
  list-style: none;
}
#archived-site li a {
  float: left;
  padding: 0.5em 0.5em;
  background: #D90000;
  color: #fff;
  text-decoration: none;
  margin-right: 0.5em;
}
#archived-site li a:hover {
  background: #000;
}
#archived-info {
  background:#D90000;
  position:inherit;
  display:none;
}

以及所使用的html：

<div id="container">
<div id="archived-site">
    <div class="inner">
         <h2>This site has been archived</h2> 
        <p>This is an archived site. To view the latest HEA material 
relating to your  subject please visit the HEA disciplines page <a href="#">here
</a>and select your chosen discipline</p>
        <ul>
            <li><a href="#" id="archived-msg">Remove</a>

            </li>
            <li><a href="#" id="archived-more">More Info</a>

            </li>
        </ul>
    </div>
    <div id="archived-info">
         <h3>Further Information</h3> 
        <p>For further information read this!</p>
    </div>
</div>
</div>

此网站已存档
这是一个存档站点。查看最新的HEA材料
请访问HEA学科页面，选择所选学科







进一步资料
欲了解更多信息，请阅读此

如果您有任何建议、建议或解决方案，我们将不胜感激。如果我遗漏了什么，请随时提问，我会尽力的 尽快回答

按要求编辑 JSFiddle，希望这能给我到目前为止的一些指示。再次感谢

感谢BenMann的语法解决方案

即使使用语法解决方案，jquery也只替换背景图像。我想要的是背景图像现在来到前台，保留原始背景图像并覆盖页面上的所有内容

---

再次感谢所有看过的人。

所以我认为您的总体想法是正确的，但您的语法是错误的

$("#container").attr('src','url(..url-location)');

不起作用

您需要的是：

$("#container").attr('src','../path/to/img.jpg');

如果

#容器

是

或

$("#container").css({"background":"url(../path/to/img.jpg)"});

如果是有背景图像的div。而且你的小提琴看起来有点奇怪。。CSS区域中的HTML