个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 22:53:39 26 4
gpt4 key购买 nike

我有一个具有固定(绝对)位置和透明背景的 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, 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-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>

最佳答案

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

不幸的是，这个解决方案是完美的并且没有得到广泛支持(由于 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,transparent 70px,#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-clip:text,border-box;
  background-size: cover;
  padding: 100px 0;
}

.wrapper-3 {
  background: 
   linear-gradient(to bottom,transparent 70px,#cccccc 71px) fixed,  
   #0033aa;
  color:transparent;
  -webkit-background-clip:text,border-box;
  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, 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-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>

关于javascript - 我需要在#menu(绝对固定的div)下隐藏文本和图像，但保留背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59342857/

26 4 0
文章推荐： javascript - 将 PHP 文件中的 HTML 表单数据传递到其他 3 个 PHP 文件之一
文章推荐： javascript - Chart.js 无法读取未定义的属性 'fontSize'
文章推荐： c++ - WinAPI 从编辑控件中检索文本
文章推荐： javascript - 检查 localstorage javascript 中的 double 内容数组？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com