我有一个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>