html - 背景图像中 CSS 中的负蒙版
问题描述
我想使用 png 文件在 css 中创建一个蒙版,但以不同的方式。基本上我不希望掩码显示下面的内容,但我希望它剪切下面的内容并显示其他所有内容。所以就像负面面具。重要的事实是我想掩盖背景图像。这是我想要做的::
我这里有 3 层。第一个是视频 (html),然后是作为重复背景 (CSS 背景) 的虚线背景,然后是蒙版 - 需要是 png 图像,因为这将是徽标。我希望蒙版移除其下方的背景并显示视频。
.cont {
width: 100%;
height: 450px;
position: relative;
background: url("http://www.kamiennadlyna.pl/test/img/video-bg.jpg") no-repeat center;
}
.maska {
width: 100%;
height: 100%;
background: url("http://www.kamiennadlyna.pl/test/img/mask.png") repeat;
left: 0;
bottom: 0;
position: absolute;
text-align: center;
/*-webkit-mask-image: url("https://www.tucado.com/images/logo.png")*/
}
<div class="cont">
<video autoplay muted loop id="myVideo">
<source src="http://www.kamiennadlyna.pl/video.mp4" type="video/mp4" poster="http://www.kamiennadlyna.pl/test/img/video-bg.jpg">
</video>
<div class="maska">
</div>
</div>
解决方案
新答案
根据更新,您可以执行以下操作。这个想法是考虑你的标志的倒置版本,你使透明部分不透明(和不透明部分透明),然后应用多个蒙版层来获得你想要的。
我从旧答案中保留了相同的想法。我正在考虑覆盖中心的徽标:
.overlay {
--h:200px; /* height of the logo*/
--w:200px; /* width of the logo */
height:300px;
background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;
-webkit-mask:
linear-gradient(#fff,#fff) top /100% calc(50% - var(--h)/2),
linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
linear-gradient(#fff,#fff) left /calc(50.1% - var(--w)/2) 100%,
linear-gradient(#fff,#fff) right /calc(50.1% - var(--w)/2) 100%,
url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);
mask:
linear-gradient(#fff,#fff) top /100% calc(50% - var(--h)/2),
linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
linear-gradient(#fff,#fff) left /calc(50% - var(--w)/2) 100%,
linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
body {
background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>
这是一个相关的问题来解释如何获得新版本的标志:https ://graphicdesign.stackexchange.com/q/63635
我们也可以玩mask-composite
并保留原来的标志,调整和改变位置会更容易。注意遮罩层的顺序,这与第一个示例不同:
.overlay {
height:300px;
background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;
-webkit-mask:
linear-gradient(#fff,#fff),
url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;
-webkit-mask-repeat:no-repeat;
-webkit-mask-composite:source-out;
mask:
linear-gradient(#fff,#fff),
url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;
mask-repeat:no-repeat;
mask-composite:exclude;
}
body {
background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>
旧答案
我会用纯 CSS 构建它而不需要图像:
.overlay {
height:300px;
/* the stripes */
background:repeating-linear-gradient(to right,blue 0 10px,transparent 10px 20px);
/* the mask*/
-webkit-mask:
linear-gradient(#fff,#fff) top /100% 50px,
linear-gradient(#fff,#fff) bottom/100% 50px,
linear-gradient( 235deg,transparent 10%,#fff 9%) calc(50% - 600px) 50%/1200px calc(100% - 100px),
linear-gradient(-235deg,transparent 10%,#fff 9%) calc(50% + 600px) 50%/1200px calc(100% - 100px);
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(#fff,#fff) top /100% 50px,
linear-gradient(#fff,#fff) bottom/100% 50px,
linear-gradient( 235deg,transparent 10%,#fff 9%) calc(50% - 600px) 50%/1200px calc(100% - 100px),
linear-gradient(-235deg,transparent 10%,#fff 9%) calc(50% + 600px) 50%/1200px calc(100% - 100px);
mask-repeat:no-repeat;
}
body {
background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>
要理解这里的难题是用于具有不同颜色的蒙版的渐变:
.overlay {
height:300px;
background:
linear-gradient(blue,blue) top /100% 50px,
linear-gradient(red,red) bottom/100% 50px,
linear-gradient( 235deg,transparent 10%,green 9%)
calc(50% - 600px) 50% / 1200px calc(100% - 100px),
/* ^ this half of this ^ */
linear-gradient(-235deg,transparent 10%,purple 9%)
calc(50% + 600px) 50%/1200px calc(100% - 100px);
background-repeat:no-repeat;
}
body {
background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>
这是另一种语法,我将使用 CSS 变量轻松控制三角形:
.overlay {
--h:200px; /* height of the triangle*/
--w:200px; /* width of the triangle */
height:300px;
/* the stripes */
background:repeating-linear-gradient(to right,blue 0 10px,transparent 10px 20px);
/* the mask*/
-webkit-mask:
linear-gradient(#fff,#fff) top /100% calc(50% - var(--h)/2),
linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
linear-gradient(#fff,#fff) left /calc(50% - var(--w)/2) 100%,
linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
linear-gradient(to top right,#fff 49%,transparent 50%) calc(50% - var(--w)/4) 50%/calc(var(--w)/2) var(--h),
linear-gradient(to top left ,#fff 49%,transparent 50%) calc(50% + var(--w)/4) 50%/calc(var(--w)/2) var(--h);
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(#fff,#fff) top /100% calc(50% - var(--h)/2),
linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
linear-gradient(#fff,#fff) left /calc(50% - var(--w)/2) 100%,
linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
linear-gradient(to top right,#fff 49%,transparent 50%) calc(50% - var(--w)/4) 50%/calc(var(--w)/2) var(--h),
linear-gradient(to top left ,#fff 49%,transparent 50%) calc(50% + var(--w)/4) 50%/calc(var(--w)/2) var(--h);
mask-repeat:no-repeat;
}
body {
background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>
推荐阅读
- java - 从 certbot(独立)生成的 ssl 密钥库不适用于 spring-boot
- multithreading - 在追加 blob 的 csv 文件顶部添加标题
- python - 在 Python Zeep 中格式良好的文档中需要根元素
- sql-server - 使用子查询聚合但输出不同
- javascript - 下拉列表中的选择 选择对 javascript 没有影响
- django - 使用 call_command(startapp,app_name)时 django 中的 CommandError
- google-ads-api - 如何使用 GAQL 查询从 Google Ads API 中的广告系列级别下载最终网址
- javascript - 为什么 emmet 在我的 Vue 模板中这么慢?
- powerbi - 如何在使用 REST 端点创建 PowerBI 报表时传递额外参数
- python - 为什么在 python 中使用破折号时出现名称错误