jquery - 如何将部分内容变灰或将图像 "on top"隐藏

Question

我使用的是 WordPress 插件，我只需在其中输入要生成的页面的短代码。我想将出现的一小部分内容变灰。我可以将一些 html 代码添加到 WordPress 页面来执行此操作吗？理想情况下，我会添加类似“此部分仅供专业成员(member)使用”之类的内容。或者，有没有一种方法可以添加固定图像，使其位于页面该部分的“顶部”，从而使下面的内容不可见？

Answer 1

啊……我最喜欢的问题!!!

通常我会为隐藏内容创建一个类，只是为了灰色显示。因此您可以为任何 div 或容器标签应用该隐藏类，它将使内容和背景变灰。

但请记住，这仅适用于新浏览器。您可以在以下网站上找到这些详细信息。 Can I use?
Mozilla Developer

下面的示例 Codepen

http://codepen.io/anon/pen/rjewpd

HTML
<div class="mainContainer hiddenContent">
  hi i am content.
</div>

CSS
.mainContainer
{
  background:aqua;
}
.hiddenContent
{
   -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
  opacity:0.2;
  background:#bbb;
}