Jquery 如何灰显内容部分或放置图像“；“在上面”；隐藏

我使用的是WordPress插件，我只需输入一个要生成页面的短代码。我想将出现的内容的一小部分灰显出来。是否有一些html代码可以添加到WordPress页面来实现这一点？理想情况下，我会添加一些类似“本节仅适用于亲成员”的内容。或者，是否有一种方法可以添加一个固定图像，使其位于页面该部分的“顶部”，从而使下面的内容不可见？

Ahhh…我最喜欢的问题

通常我为hiddencontent创建一个类只是为了灰显。 因此，您可以将该隐藏类应用于任何div或container标记，它将灰显内容和背景

但请记住，这只适用于新浏览器。您可以在以下网站上找到这些详细信息。

下面是示例代码笔

HTML
嗨，我很满意。
CSS
.主集装箱
{
背景：水；
}
.隐藏内容
{
-webkit触摸标注：无；/*iOS Safari*/
-webkit用户选择：无；/*Chrome/Safari/Opera*/
-khtml用户选择：无；/*Konqueror*/
-moz用户选择：无；/*Firefox*/
-ms用户选择：无；/*Internet Explorer/Edge*/
用户选择：无；/*无前缀版本，当前
任何浏览器都不支持*/
不透明度：0.2；
背景:#bbb ;；
}

在DOM中的内容上放置某些内容以隐藏它是不安全的。任何人都可以打开开发工具并移除“封皮”，或者只是在开发工具中查看封皮下的内容。我并不太担心，因为封皮下的内容不是机密信息，大多数人不会为此烦恼。我只是想把它灰显出来，或者至少添加一些图像来覆盖它。标记是什么样子的？你如何决定它是否应该变灰？我在两页上使用相同的短代码-我只想在第二页上隐藏一个小部分。所以我想，我当然可以在内容的“顶部”添加一些图像，或者找到一些插件，在页面上加载的内容的“顶部”添加一些固定内容。

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