html - 如何在背景大小变化时屏蔽文本

Question

目前，我正在为我们的网页设计业务开发一个新网站，我需要屏蔽移动导航文本，以便在背景可见时显示它，并在背景不可见时隐藏文本。

目前动画就是这样做的，当背景滑出时文本会重叠。

Image of issues

我基本上需要它来做到这一点Image of solution (photoshopped)其中文本被“屏蔽”以在滑出时隐藏。

<div class="et_pb_menu__menu custom-menu-active">
<nav class="et-menu-nav">
    <ul id="menu-primary-menu" class="et-menu nav">
        <li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-17 current_page_item menu-item-40">
            <a href="https://grow-my-business.dreamhosters.com/" aria-current="page">Home</a>
        </li>
        <li class="et_pb_menu_page_id-19 menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
            <a href="https://grow-my-business.dreamhosters.com/about/">About</a>
        </li>
        <li class="et_pb_menu_page_id-21 menu-item menu-item-type-post_type menu-item-object-page menu-item-38">
            <a href="https://grow-my-business.dreamhosters.com/seo-services/">SEO Services</a>
        </li>
        <li class="et_pb_menu_page_id-23 menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
            <a href="https://grow-my-business.dreamhosters.com/website-design-faq/">Website Design FAQ</a>
        </li>
        <li class="et_pb_menu_page_id-25 menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
            <a href="https://grow-my-business.dreamhosters.com/portfolio/">Portfolio</a>
        </li>
        <li class="et_pb_menu_page_id-27 menu-item menu-item-type-post_type menu-item-object-page menu-item-35">
            <a href="https://grow-my-business.dreamhosters.com/testimonials/">Testimonials</a>
        </li>
        <li class="et_pb_menu_page_id-29 menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
            <a href="https://grow-my-business.dreamhosters.com/blog/">Blog</a>
        </li>
        <li class="et_pb_menu_page_id-31 menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
            <a href="https://grow-my-business.dreamhosters.com/contact/">Contact</a>
        </li>
    </ul>
</nav>

.et_pb_menu__menu {
position: fixed;
top: 0; left: 0;
height: 100vh!important;
width: 100vw;
background: linear-gradient(135deg,rgba(254,209,7,0.95) 50.1%,rgba(0,0,0,0) 50%);
background-size: 100px 100px;
background-position: -100px -100px;
background-repeat: no-repeat;
pointer-events: none;
transition: all 1s ease;}

.et_pb_menu__menu.custom-menu-active {
pointer-events: all;
background-position: 0% 0%;
background-size: 400% 300%;}

该网站的测试版本在这里:https://grow-my-business.dreamhosters.com/

(移动导航为 980 像素及以下)

Answer 1

用蒙版替换背景并保持所有内容相同(大小和位置)

.et_pb_menu__menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh!important;
  width: 100vw;
  background:rgba(254, 209, 7, 0.95);
  -webkit-mask: linear-gradient(135deg, #fff 50.1%, transparent 50%);
  -webkit-mask-size: 100px 100px;
  -webkit-mask-position: -100px -100px;
  -webkit-mask-repeat: no-repeat;
  transition: all 1s ease;
}

.et_pb_menu__menu:hover {
  -webkit-mask-position: 0% 0%;
  -webkit-mask-size: 400% 300%;
}

<div class="et_pb_menu__menu custom-menu-active">
  <nav class="et-menu-nav">
    <ul id="menu-primary-menu" class="et-menu nav">
      <li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-17 current_page_item menu-item-40">
        <a href="https://grow-my-business.dreamhosters.com/" aria-current="page">Home</a>
      </li>
      <li class="et_pb_menu_page_id-19 menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
        <a href="https://grow-my-business.dreamhosters.com/about/">About</a>
      </li>
      <li class="et_pb_menu_page_id-21 menu-item menu-item-type-post_type menu-item-object-page menu-item-38">
        <a href="https://grow-my-business.dreamhosters.com/seo-services/">SEO Services</a>
      </li>
      <li class="et_pb_menu_page_id-23 menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
        <a href="https://grow-my-business.dreamhosters.com/website-design-faq/">Website Design FAQ</a>
      </li>
      <li class="et_pb_menu_page_id-25 menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
        <a href="https://grow-my-business.dreamhosters.com/portfolio/">Portfolio</a>
      </li>
      <li class="et_pb_menu_page_id-27 menu-item menu-item-type-post_type menu-item-object-page menu-item-35">
        <a href="https://grow-my-business.dreamhosters.com/testimonials/">Testimonials</a>
      </li>
      <li class="et_pb_menu_page_id-29 menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
        <a href="https://grow-my-business.dreamhosters.com/blog/">Blog</a>
      </li>
      <li class="et_pb_menu_page_id-31 menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
        <a href="https://grow-my-business.dreamhosters.com/contact/">Contact</a>
      </li>
    </ul>
  </nav>

也如下:

.et_pb_menu__menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh!important;
  width: 100vw;
  background:rgba(254, 209, 7, 0.95);
  -webkit-mask: linear-gradient(135deg, #fff 50.1%, transparent 50%);
  -webkit-mask-position: 100% 100%;
  -webkit-mask-size: 200% 200%;
  -webkit-mask-repeat: no-repeat;
  transition: all 1s ease;
}

.et_pb_menu__menu:hover {
  -webkit-mask-position: 0 0;
}

<div class="et_pb_menu__menu custom-menu-active">
  <nav class="et-menu-nav">
    <ul id="menu-primary-menu" class="et-menu nav">
      <li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-17 current_page_item menu-item-40">
        <a href="https://grow-my-business.dreamhosters.com/" aria-current="page">Home</a>
      </li>
      <li class="et_pb_menu_page_id-19 menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
        <a href="https://grow-my-business.dreamhosters.com/about/">About</a>
      </li>
      <li class="et_pb_menu_page_id-21 menu-item menu-item-type-post_type menu-item-object-page menu-item-38">
        <a href="https://grow-my-business.dreamhosters.com/seo-services/">SEO Services</a>
      </li>
      <li class="et_pb_menu_page_id-23 menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
        <a href="https://grow-my-business.dreamhosters.com/website-design-faq/">Website Design FAQ</a>
      </li>
      <li class="et_pb_menu_page_id-25 menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
        <a href="https://grow-my-business.dreamhosters.com/portfolio/">Portfolio</a>
      </li>
      <li class="et_pb_menu_page_id-27 menu-item menu-item-type-post_type menu-item-object-page menu-item-35">
        <a href="https://grow-my-business.dreamhosters.com/testimonials/">Testimonials</a>
      </li>
      <li class="et_pb_menu_page_id-29 menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
        <a href="https://grow-my-business.dreamhosters.com/blog/">Blog</a>
      </li>
      <li class="et_pb_menu_page_id-31 menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
        <a href="https://grow-my-business.dreamhosters.com/contact/">Contact</a>
      </li>
    </ul>
  </nav>

Clip-path 也可以做到:

.et_pb_menu__menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh!important;
  width: 100vw;
  background:rgba(254, 209, 7, 0.95);
  clip-path:polygon(0 0,0 0,0 0);
  transition: all 1s ease;
}

html:hover .et_pb_menu__menu{
  clip-path:polygon(0 0,200vmax 0,0 200vmax);
}

<div class="et_pb_menu__menu custom-menu-active">
  <nav class="et-menu-nav">
    <ul id="menu-primary-menu" class="et-menu nav">
      <li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-17 current_page_item menu-item-40">
        <a href="https://grow-my-business.dreamhosters.com/" aria-current="page">Home</a>
      </li>
      <li class="et_pb_menu_page_id-19 menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
        <a href="https://grow-my-business.dreamhosters.com/about/">About</a>
      </li>
      <li class="et_pb_menu_page_id-21 menu-item menu-item-type-post_type menu-item-object-page menu-item-38">
        <a href="https://grow-my-business.dreamhosters.com/seo-services/">SEO Services</a>
      </li>
      <li class="et_pb_menu_page_id-23 menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
        <a href="https://grow-my-business.dreamhosters.com/website-design-faq/">Website Design FAQ</a>
      </li>
      <li class="et_pb_menu_page_id-25 menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
        <a href="https://grow-my-business.dreamhosters.com/portfolio/">Portfolio</a>
      </li>
      <li class="et_pb_menu_page_id-27 menu-item menu-item-type-post_type menu-item-object-page menu-item-35">
        <a href="https://grow-my-business.dreamhosters.com/testimonials/">Testimonials</a>
      </li>
      <li class="et_pb_menu_page_id-29 menu-item menu-item-type-post_type menu-item-object-page menu-item-34">
        <a href="https://grow-my-business.dreamhosters.com/blog/">Blog</a>
      </li>
      <li class="et_pb_menu_page_id-31 menu-item menu-item-type-post_type menu-item-object-page menu-item-33">
        <a href="https://grow-my-business.dreamhosters.com/contact/">Contact</a>
      </li>
    </ul>
  </nav>