Css 打开导航栏时如何使页面变暗？

我希望当点击切换按钮时，导航栏“折叠”打开，页面其余部分的底部变成透明的黑色

如何做到这一点

以下是我想要的示例：

以下是drupal模板的内容：

{#
/**
*@file
*显示单个页面的默认主题实现。
*
*doctype、html、head和body标记不在此模板中，而是
*可以在该目录的html.html.twig模板中找到。
*
*可用变量：
*
*一般效用变量：
*-base_path：Drupal安装的基本URL路径。通常为
*“/”除非您在子目录中安装了Drupal。
*-is_front：指示当前页面是否为首页的标志。
*-已登录：指示用户是否已注册和登录的标志。
*-is_admin：指示用户是否具有访问权限的标志
*管理页面。
*
*站点标识：
*-首页：首页的URL。在
*链接到首页。这包括语言域或前缀。
*
*导航：
*-面包屑：当前页面的面包屑轨迹。
*
*页面内容（按默认页面.html.twig中出现的顺序）：
*-title_前缀：由模块填充的附加输出，用于
*显示在模板中显示的主标题标记前面。
*-标题：页面标题，用于实际内容。
*-title_后缀：由模块填充的附加输出，用于
*显示在模板中显示的主标题标记之后。
*-消息：状态和错误消息。应突出显示。
*-选项卡：链接到当前页面下任何子页面的选项卡（例如
*显示节点时查看和编辑选项卡）。
*-操作链接：页面的本地操作，如菜单上的“添加菜单”
*管理界面。
*-节点：完全加载的节点，如果有自动加载的节点
*与页面和节点ID关联的是
*页面路径（例如节点/12345和节点/12345/修订版，但不是
*评论/答复/12345）。
*
*区域：
*-page.header：标题区域的项目。
*-page.navigation：导航区域的项目。
*-page.navigation\u可折叠：导航（可折叠）区域的项目。
*-page.highlighted：突出显示的内容区域的项目。
*-page.help：动态帮助文本，主要用于管理页面。
*-page.content：当前页面的主要内容。
*-page.sidebar_first：第一个侧栏的项目。
*-page.sidebar_second：第二个侧边栏的项目。
*-page.footer：页脚区域的项目。
*
*@ingroup模板
*
*@参见模板预处理页面（）
*@see html.html.twig
*/
#}
{%set container=theme.settings.fluid_container？'container fluid'：'container%}
{#导航（可折叠）}
{%if page.navigation_可折叠%}
{{page.navigation_collapsable}}
{%endif%}
{#导航栏}
{%if page.navigation或page.navigation_可折叠%}
{%block navbar%}
{%
设置导航栏\u类=[
“导航栏”，
theme.settings.navbar_inverse？'navbar inverse'：'navbar default'，
theme.settings.navbar_position？'navbar-'~theme.settings.navbar_position | clean_class:container，
]
%}
{%如果不是navbar_属性。hasClass（容器）%}
{%endif%}
{{page.navigation}
{#.btn导航栏用作折叠导航栏内容的切换}
{%如果不是navbar_属性。hasClass（容器）%}
{%endif%}
{%endblock%}
{%endif%}
{#Main}
{%block main%}
{#标题}
{%if page.header%}
{%块头%}
{{page.header}}
{%endblock%}
{%endif%}
{#边栏第一}
{%if page.sidebar_first%}
{%block侧边栏_first%}
{{page.sidebar_first}
{%endblock%}
{%endif%}
{#内容}
{%
设置内容\u类=[
page.sidebar_第一页和page.sidebar_第二页？'col-sm-6'，
page.sidebar_first和page.sidebar_second为空？'col-md-9'，
page.sidebar_second和page.sidebar_first为空？'col-md-9'，
page.sidebar_first为空，page.sidebar_second为空？'col-sm-12'
]
%}
{突出显示}
{%if page.highlighted%}
{%块突出显示%}
{{page.highlighted}}
{%endblock%}
{%endif%}
{#面包屑}
{%if面包屑%}
{%block breadcrumb%}
{{breadcrumb}
{%endblock%}
{%endif%}
{#动作链接}
{%if action_links%}
{%block action_links%}
{{action\u links}
{%endblock%}
{%endif%}
{帮助}
{%if page.help%}
{%block help%}
{{page.help}
{%endblock%}
{%endif%}
{#内容}
{%block content%}
{{page.content}}
{%endblock%}
{#第二个侧边栏}
{%if page.sidebar_second%}
{%block侧边栏_second%}
{{page.sidebar_second}}
{%endblock%}
{%endif%}
{%endblock%}
{%if page.footer%}
{%block footer%}
{{page.footer}}
{%endblock%}
{%endif%}

导航菜单对应于代码的这一部分：

{#导航（可折叠）}
{%if page.navigation_可折叠%}
{{page.navigation_collapsable}}
{%endif%}

我已经检查了您的站点，您可以在样式表中使用此CSS

#navbar-collapse > div {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 999;
    width: 100%;
    left: 0;
}
#navbar-collapse::after {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
    z-index: 0;
}

@基里克胡子什么也没有：-）我找了

{# Navigation (collapsible) #}
{% if page.navigation_collapsible %}
  <div id="navbar-collapse" class="navbar-collapse collapse width">
    {{ page.navigation_collapsible }}
  </div>
{% endif %}

#navbar-collapse > div {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 999;
    width: 100%;
    left: 0;
}
#navbar-collapse::after {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
    z-index: 0;
}