CSS Trick透明和减去背景

Question

我想在图片中看到以下内容。我有一个100％宽度的背景，这是透明的，在中间它有减去。我怎样才能在css中解决这个问题？ 我尝试制作一个100％宽度的div，但我可以裁剪或剪切背景中的东西吗？黑线是网站的菜单，必须固定位置。

Answer 1

如果我正确理解您的问题，您可以有两种解决方案：

• 首先你可以使用svg mask作为@easwee建议：solution here，

• 其次，您可以z-index您的图片，以便它始终位于您的菜单前面。你不会拥有你正在寻找的透明形状......这是一个例子：

＆＃13;

＆＃13;

nav {
  width: 100%;
  height: 50px;
  background-color: #000;
  position: fixed;
}
img {
  width: 350px;
  height: 150px;
  z-index: 10; /* z-index to put picture in front of your menu */
  position: relative; /* Don't forget to add this for your z-index to display over position: fixed element */
}

＆＃13;

<nav>
</nav>
<img src="http://lorempixel.com/350/150" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum leo vitae turpis bibendum, vitae semper est semper. Sed ut posuere lacus. Phasellus eget molestie mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla porttitor libero orci, a faucibus eros ultricies sed. Morbi urna purus, finibus in volutpat non, bibendum nec nisi. Morbi pellentesque porta justo ac feugiat. Donec ac enim turpis.</p>
<p>In hac habitasse platea dictumst. Donec sollicitudin eget est id consequat. Etiam vehicula velit erat, id molestie nisl dignissim eu. Suspendisse mollis est nunc, ut aliquam quam maximus luctus. Morbi in magna faucibus magna volutpat sollicitudin sit amet quis orci. Mauris vitae neque a purus dapibus euismod quis id neque. Nullam maximus tempor purus, a commodo mi venenatis et.</p>
<p>In hac habitasse platea dictumst. Donec sollicitudin eget est id consequat. Etiam vehicula velit erat, id molestie nisl dignissim eu. Suspendisse mollis est nunc, ut aliquam quam maximus luctus. Morbi in magna faucibus magna volutpat sollicitudin sit amet quis orci. Mauris vitae neque a purus dapibus euismod quis id neque. Nullam maximus tempor purus, a commodo mi venenatis et.</p>

＆＃13;

＆＃13;

＆＃13;