我需要在#menu(绝对固定div)下隐藏文本和图像,但要保留背景

我有一个div.menu,位置固定(绝对),背景透明。

我要裁剪(遮罩)此div.menu下的所有内容(文本和图像) 但是我需要离开(显示)该div的背景色和背景图像。

Here is an image当前的样子。

这是我的代码:

body {
    margin: 0;
    padding: 0;
    background-color: #aaaaaa;
    position: relative;
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 25px 0;
    background-color: transparent;
    text-align: center;
}

.wrapper-1 {
    background-color: #ffffff;
    padding: 100px 0;
}
.wrapper-2 {
    background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    padding: 100px 0;
    color: #aaaaaa;
}
.wrapper-3 {
    background-color: #0033aa;
    padding: 100px 0;
    color: #cccccc;
}
<body>
    <div class="wrapper-1">
        Lorem ipsum dolor sit amet,consectetur adipisicing elit. Mollitia error aliquam dignissimos sint totam voluptate corporis pariatur dolorem enim distinctio,officia suscipit expedita,voluptatum quibusdam omnis,provident officiis quasi. Sint sapiente praesentium neque quod,illum aliquid temporibus eos minus quaerat repudiandae laudantium quos exercitationem cum impedit ipsam quam sunt est ex dignissimos numquam autem iure expedita itaque. Sit magni eveniet perferendis. Aperiam distinctio magni nobis,porro amet vel corporis ea minus necessitatibus fugit nam repellendus ipsum explicabo,quibusdam. Facere aliquid natus provident consequatur fugiat reprehenderit,dolorem nobis! Asperiores suscipit eveniet numquam repudiandae commodi iusto ullam natus nulla ab debitis repellendus perspiciatis perferendis,doloribus dolores aut tempore saepe consequatur in,quo. Minus officia,omnis,fugiat illo ipsum pariatur mollitia veniam,facere ipsam,iure aut dignissimos! Natus ad iure esse,deserunt fugiat minima,officia dolore ipsa fuga facere aperiam quia neque,ab amet sapiente unde consectetur dolorem nesciunt illum possimus ea distinctio necessitatibus eum tempore obcaecati. Explicabo eaque nesciunt cum id doloribus,voluptates,nemo. Rerum quaerat aliquid corporis rem dignissimos nam velit,perferendis,illo enim ullam quos voluptas facilis odio autem sunt molestiae ipsa ad veritatis repudiandae laboriosam inventore aliquam ab! Minima dicta,numquam voluptas aliquid omnis quis quisquam magnam laboriosam veritatis!
    </div>
    <div class="wrapper-2">
        <img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg">Lorem ipsum dolor sit amet,numquam voluptas aliquid omnis quis quisquam magnam laboriosam veritatis!
    </div>
    <div class="wrapper-3">
        Lorem ipsum dolor sit amet,consectetur adipisicing elit. Tenetur eius sequi praesentium corporis,soluta blanditiis ab nulla velit quibusdam temporibus hic quae placeat magni,ducimus? Ea modi illum sequi,optio et quis a quia possimus,aliquid saepe quas iste totam necessitatibus ullam neque fugiat voluptas officia. Aliquam eius nesciunt odit consequuntur voluptate nobis,rerum nisi at molestias,praesentium quisquam inventore culpa nemo maxime incidunt dignissimos. Alias amet itaque doloremque. Ducimus et numquam aliquid ipsam illum fugiat doloribus voluptatem sunt corporis doloremque. Omnis,atque,quas? Dolorum ut iure placeat alias mollitia eum est voluptate dignissimos nisi sunt. Sunt eos beatae alias repellendus minima accusantium explicabo illo eveniet mollitia assumenda! Minus,sunt,possimus? Tempore sunt placeat suscipit adipisci quis aliquam molestias,delectus itaque nostrum excepturi,ipsam sint. Voluptas eaque harum nesciunt magni architecto,quidem id commodi autem debitis hic alias,eum eos,necessitatibus atque nihil! Exercitationem quas quidem magni,consequatur deserunt rem ab doloremque numquam,quaerat consequuntur architecto dolore accusantium officia,facere quia. Inventore voluptatibus vel aperiam,eos repudiandae laudantium,minima sint reprehenderit id,expedita iste ullam dolorem praesentium quaerat velit nisi voluptatum fugiat repellat ipsa maxime officiis natus. Natus id eveniet excepturi rem enim explicabo repellendus at illum totam recusandae ipsum,dicta maiores ducimus expedita consequuntur minima consectetur sit ad autem. Exercitationem harum,temporibus voluptate sint suscipit error? Necessitatibus labore mollitia temporibus,eum eaque tempore,asperiores placeat impedit voluptates aut laboriosam,illum sit ducimus sunt! Quaerat voluptatem itaque,maxime assumenda quidem expedita dolore. Et aliquid assumenda delectus vitae dolorum asperiores laudantium eligendi,excepturi iste facere dicta,vel sapiente consectetur,quas,ex? Similique illo dolorum culpa explicabo et,nemo deserunt! Dignissimos sint quidem incidunt,iure optio harum ad,debitis voluptatibus quam repellendus,repudiandae inventore obcaecati! Architecto optio quidem maiores quos temporibus nostrum dolor odio quas dolorem sit neque aperiam quis sint modi ut,porro iste iusto rem fuga vero dignissimos assumenda perferendis in quia! Aliquam quos nesciunt temporibus in itaque sapiente,vel ab fugit minus possimus omnis id,sunt deleniti veniam laudantium harum tempore blanditiis repellat ea dolorem voluptas laboriosam officia rerum. Quos explicabo molestiae aspernatur necessitatibus dignissimos natus,quae nobis cupiditate sit quidem tempora soluta vitae perspiciatis magni repudiandae repellat ad id laudantium consequatur iure odit excepturi consequuntur dolor! Sint aliquid minus consequatur quisquam quaerat eum,sit ex corporis,accusamus natus,eos unde assumenda eligendi reprehenderit. Quae error est ab. Neque perspiciatis ratione natus tempora soluta quasi labore consequuntur dignissimos,deleniti,alias a iste,ad laboriosam pariatur molestiae ut placeat ipsum. Reiciendis laboriosam ut ratione explicabo cumque,cum,aut accusamus dicta laudantium,molestias,adipisci architecto neque odio doloremque vel voluptatem quam ducimus mollitia in eligendi dolorum aspernatur impedit. Non,provident culpa explicabo sapiente recusandae voluptatem perspiciatis hic facilis veritatis fugiat eaque accusamus eligendi sit consequatur quasi accusantium quo iusto cupiditate,itaque cumque minima autem nulla odit architecto! Ut culpa reiciendis ullam,omnis. Hic dolores harum sint. Fugit hic porro doloribus omnis magni deleniti quo,quam,tenetur cupiditate maiores. Fuga,architecto,voluptatem. Asperiores quod aliquid,tempora dicta ullam sed aut eos,maiores.
    </div>
    
    <div class="menu">some menu items</div> 
</body>

oliverleaf 回答:我需要在#menu(绝对固定div)下隐藏文本和图像,但要保留背景

这里是一个想法,您可以使用渐变背景为文本着色,并固定该背景。此技巧仅适用于文本而不适用于图像,您需要知道固定导航的高度才能正确设置渐变大小。

不幸的是,该解决方案是完美的,并且不受广泛支持(由于bug,因此在Firefox中无法使用)

body {
  margin: 0;
  padding: 0;
  background-color: #aaaaaa;
  position: relative;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 25px 0;
  background-color: transparent;
  text-align: center;
}

.wrapper-1 {
  background: 
    linear-gradient(to bottom,transparent 70px,#000 71px) fixed,#fff;
  color:transparent;
  -webkit-background-clip:text,border-box;
  background-clip:text,border-box;
  padding: 100px 0;
}

.wrapper-2 {
  background: 
   linear-gradient(to bottom,#aaaaaa 71px) fixed,url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
  color:transparent;
  -webkit-background-clip:text,border-box;
  background-size: cover;
  padding: 100px 0;
}

.wrapper-3 {
  background: 
   linear-gradient(to bottom,#cccccc 71px) fixed,#0033aa;
  color:transparent;
  -webkit-background-clip:text,border-box;
  padding: 100px 0;
}

img {
  width:200px;
  float:left;
}
<body>
  <div class="wrapper-1">
    Lorem ipsum dolor sit amet,consectetur adipisicing elit. Mollitia error aliquam dignissimos sint totam voluptate corporis pariatur dolorem enim distinctio,officia suscipit expedita,voluptatum quibusdam omnis,provident officiis quasi. Sint sapiente
    praesentium neque quod,illum aliquid temporibus eos minus quaerat repudiandae laudantium quos exercitationem cum impedit ipsam quam sunt est ex dignissimos numquam autem iure expedita itaque. Sit magni eveniet perferendis. Aperiam distinctio magni
    nobis,porro amet vel corporis ea minus necessitatibus fugit nam repellendus ipsum explicabo,quibusdam. Facere aliquid natus provident consequatur fugiat reprehenderit,dolorem nobis! Asperiores suscipit eveniet numquam repudiandae commodi iusto
    ullam natus nulla ab debitis repellendus perspiciatis perferendis,doloribus dolores aut tempore saepe consequatur in,quo. Minus officia,omnis,fugiat illo ipsum pariatur mollitia veniam,facere ipsam,iure aut dignissimos! Natus ad iure esse,deserunt
    fugiat minima,officia dolore ipsa fuga facere aperiam quia neque,ab amet sapiente unde consectetur dolorem nesciunt illum possimus ea distinctio necessitatibus eum tempore obcaecati. Explicabo eaque nesciunt cum id doloribus,voluptates,nemo. Rerum
    quaerat aliquid corporis rem dignissimos nam velit,perferendis,illo enim ullam quos voluptas facilis odio autem sunt molestiae ipsa ad veritatis repudiandae laboriosam inventore aliquam ab! Minima dicta,numquam voluptas aliquid omnis quis quisquam
    magnam laboriosam veritatis!
  </div>
  <div class="wrapper-2">
    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg">Lorem ipsum dolor sit amet,provident officiis quasi. Sint sapiente praesentium neque quod,illum aliquid temporibus eos minus quaerat repudiandae laudantium quos exercitationem cum impedit ipsam quam sunt est ex dignissimos
    numquam autem iure expedita itaque. Sit magni eveniet perferendis. Aperiam distinctio magni nobis,quibusdam. Facere aliquid natus provident consequatur fugiat
    reprehenderit,dolorem nobis! Asperiores suscipit eveniet numquam repudiandae commodi iusto ullam natus nulla ab debitis repellendus perspiciatis perferendis,fugiat illo
    ipsum pariatur mollitia veniam,deserunt fugiat minima,ab amet sapiente unde consectetur dolorem nesciunt illum possimus ea distinctio necessitatibus
    eum tempore obcaecati. Explicabo eaque nesciunt cum id doloribus,nemo. Rerum quaerat aliquid corporis rem dignissimos nam velit,illo enim ullam quos voluptas facilis odio autem sunt molestiae ipsa ad veritatis repudiandae
    laboriosam inventore aliquam ab! Minima dicta,numquam voluptas aliquid omnis quis quisquam magnam laboriosam veritatis!
  </div>
  <div class="wrapper-3">
    Lorem ipsum dolor sit amet,consectetur adipisicing elit. Tenetur eius sequi praesentium corporis,soluta blanditiis ab nulla velit quibusdam temporibus hic quae placeat magni,ducimus? Ea modi illum sequi,optio et quis a quia possimus,aliquid saepe
    quas iste totam necessitatibus ullam neque fugiat voluptas officia. Aliquam eius nesciunt odit consequuntur voluptate nobis,rerum nisi at molestias,praesentium quisquam inventore culpa nemo maxime incidunt dignissimos. Alias amet itaque doloremque.
    Ducimus et numquam aliquid ipsam illum fugiat doloribus voluptatem sunt corporis doloremque. Omnis,atque,quas? Dolorum ut iure placeat alias mollitia eum est voluptate dignissimos nisi sunt. Sunt eos beatae alias repellendus minima accusantium explicabo
    illo eveniet mollitia assumenda! Minus,sunt,possimus? Tempore sunt placeat suscipit adipisci quis aliquam molestias,delectus itaque nostrum excepturi,ipsam sint. Voluptas eaque harum nesciunt magni architecto,quidem id commodi autem debitis hic
    alias,eum eos,necessitatibus atque nihil! Exercitationem quas quidem magni,consequatur deserunt rem ab doloremque numquam,quaerat consequuntur architecto dolore accusantium officia,facere quia. Inventore voluptatibus vel aperiam,eos repudiandae
    laudantium,minima sint reprehenderit id,expedita iste ullam dolorem praesentium quaerat velit nisi voluptatum fugiat repellat ipsa maxime officiis natus. Natus id eveniet excepturi rem enim explicabo repellendus at illum totam recusandae ipsum,dicta maiores ducimus expedita consequuntur minima consectetur sit ad autem. Exercitationem harum,temporibus voluptate sint suscipit error? Necessitatibus labore mollitia temporibus,eum eaque tempore,asperiores placeat impedit voluptates aut laboriosam,illum sit ducimus sunt! Quaerat voluptatem itaque,maxime assumenda quidem expedita dolore. Et aliquid assumenda delectus vitae dolorum asperiores laudantium eligendi,excepturi iste facere dicta,vel sapiente consectetur,quas,ex? Similique illo
    dolorum culpa explicabo et,nemo deserunt! Dignissimos sint quidem incidunt,iure optio harum ad,debitis voluptatibus quam repellendus,repudiandae inventore obcaecati! Architecto optio quidem maiores quos temporibus nostrum dolor odio quas dolorem
    sit neque aperiam quis sint modi ut,porro iste iusto rem fuga vero dignissimos assumenda perferendis in quia! Aliquam quos nesciunt temporibus in itaque sapiente,vel ab fugit minus possimus omnis id,sunt deleniti veniam laudantium harum tempore
    blanditiis repellat ea dolorem voluptas laboriosam officia rerum. Quos explicabo molestiae aspernatur necessitatibus dignissimos natus,quae nobis cupiditate sit quidem tempora soluta vitae perspiciatis magni repudiandae repellat ad id laudantium
    consequatur iure odit excepturi consequuntur dolor! Sint aliquid minus consequatur quisquam quaerat eum,sit ex corporis,accusamus natus,eos unde assumenda eligendi reprehenderit. Quae error est ab. Neque perspiciatis ratione natus tempora soluta
    quasi labore consequuntur dignissimos,deleniti,alias a iste,ad laboriosam pariatur molestiae ut placeat ipsum. Reiciendis laboriosam ut ratione explicabo cumque,cum,aut accusamus dicta laudantium,molestias,adipisci architecto neque odio doloremque
    vel voluptatem quam ducimus mollitia in eligendi dolorum aspernatur impedit. Non,provident culpa explicabo sapiente recusandae voluptatem perspiciatis hic facilis veritatis fugiat eaque accusamus eligendi sit consequatur quasi accusantium quo iusto
    cupiditate,itaque cumque minima autem nulla odit architecto! Ut culpa reiciendis ullam,omnis. Hic dolores harum sint. Fugit hic porro doloribus omnis magni deleniti quo,quam,tenetur cupiditate maiores. Fuga,architecto,voluptatem. Asperiores
    quod aliquid,tempora dicta ullam sed aut eos,maiores.
  </div>

  <div class="menu">some menu items</div>
</body>

本文链接:https://www.f2er.com/2919086.html

大家都在问