我有一个固定(绝对(位置和透明背景的div.menu。
我想裁剪(遮罩(此div.menu下的所有内容(文本和图像( 但我需要留下(显示(该div 的背景颜色和背景图像。
这是它当前的样子的图像。
这是我的代码：
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>这里有一个想法，您可以使用渐变背景为文本着色，并使背景固定。此技巧仅适用于文本而不适用于图像，您需要知道固定导航的高度才能正确设置渐变的大小。
不幸的是，这个解决方案是完美的，没有得到广泛的支持(由于错误，它在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>