标签: css-mask
使用 CSS 屏蔽图像
我做了一个这样的设计
如何用css掩盖背景？
我试过这样的代码
.img-poster {
display: block;
max-width: 100%;
-webkit-mask-image: url(https://cdn.pbrd.co/images/GYiCod1.png), url(https://cdn.pbrd.co/images/GYiCQsM.png);
-webkit-mask-position: bottom center, center center;
-webkit-mask-repeat: no-repeat, no-repeat;
}
.add {
-webkit-mask-composite: add;
}<section class="section poster-container">
<img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>我使用的蒙版图像是
https://i.stack.imgur.com/fg2k5.png
https://i.stack.imgur.com/zmylJ.png
你们能告诉我我的代码有什么问题吗？我知道我只能导入到 png，但我尝试使用 css
7
推荐指数
推荐指数
1
解决办法
解决办法
994
查看次数
查看次数
mask-size: 100% 100% 不水平拉伸
我正在应用 SVG 图像蒙版来创建周围的框架和图像，如下所示：
img {
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-image: url('i/test-mask.svg');
}
预期结果：遮罩应不成比例地拉伸以适合元素的尺寸。据我了解，遮罩大小应该与背景大小完全相同，并且这在背景大小中按预期工作（将背景宽度拉伸/扭曲到包含元素宽度的 100%，将高度拉伸到包含元素宽度的 100%）元素的高度）。
实际结果：遮罩包含图像高度的 100%，但保持比例，因此不会显示图像的整个宽度。
我在这里缺少什么？
这是一个工作示例：
img {
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-image: url('i/test-mask.svg');
}
img.masked {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 …7
推荐指数
推荐指数
1
解决办法
解决办法
2995
查看次数
查看次数
将多个蒙版图像应用于单个 div
我可以在我想要的 div 上的任何位置应用 a ，但是我可以在同一个 div 上mask-image应用多个吗？mask-image
单个示例mask-image：
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask-image: radial-gradient(
circle at center top,
transparent 30px,
black 31px
);
}<div></div>如果我想同时在顶部和底部应用相同的蒙版，代码会是什么样子？
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask-image: radial-gradient(
circle at center top,
transparent 30px,
black 31px
), radial-gradient(
circle at center bottom,
transparent 30px,
black 31px
);
}<div></div>编辑：我知道 Chrome 支持mask-composite，但（在撰写本文时）仅适用于 Chrome。
6
推荐指数
推荐指数
1
解决办法
解决办法
7481
查看次数
查看次数
是否可以为 CSS 蒙版图像设置动画？
我想为 CSS 蒙版图像的“蒙版位置”属性设置动画。蒙版图像本身是一个简单的渐变，我的预期行为是通过更改蒙版位置的值，我可以使背景对象从左到右淡入。但是，是否可以为该属性设置动画？如果没有，是否有解决方法？
.header-image figure {
mask-image: url("http://thehermitcrab.org/wp-content/themes/the-hermit-theme/images/gradient-mask-straight.png");
animation: clip-fade 3s;
}
@keyframes clip-fade {
0% {mask-position: 100% 0%;}
100% {mask-position: 0% 0%;}
}
HTML：
<div class="header-image">
<figure>
<img src="https://thehermitcrab.org/wp-content/themes/the-hermit-theme/images/footer/crab-footer-chalk-logo.png"/>
</figure>
</div>
谢谢！
5
推荐指数
推荐指数
1
解决办法
解决办法
3939
查看次数
查看次数
如何仅在元素的背景而不是其子元素上应用蒙版图像？
我正在尝试在元素的背景上应用蒙版图像，但我不想蒙版其子元素。我尝试更改 z-index 但没有成功。
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #000;
}
.el {
width: 100%;
height: 60px;
mask-repeat: no-repeat;
mask-position: center;
background-color: #fff;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M100 60c-13.43 0-20.2-11.37-26.74-22.37C67.25 27.53 61.57 18 50 18s-17.25 9.54-23.26 19.63C20.2 48.63 13.43 60 0 60V0h100z'/%3E%3C/svg%3E");
-webkit-mask-repeat: repeat-x;
-webkit-mask-position: left bottom;
z-index: 10;
}
.el p {
position: relative;
z-index 99;
text-align: center;
padding-top: 20px;
width:400px;
margin: auto;
background: red;
color: white;
}<div class="el"><p>Duis enim elit, …5
推荐指数
推荐指数
1
解决办法
解决办法
6577
查看次数
查看次数
css mask-image 之后元素的边框丢失
我已将 svg 作为遮罩图像应用于某些 div。这样做之后，他们的边界就消失了。
.icon {
padding:5px;
border:5px solid #000;
width: 150px;
height: 150px;
display: inline-block;
-webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
mask-size: contain;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}<div class="wrap">
<div class="icon red"></div>
<div class="icon blue"></div>
</div>知道为什么会发生这种情况吗？任何解决方案都应该仅基于 CSS。
5
推荐指数
推荐指数
1
解决办法
解决办法
2997
查看次数
查看次数
CSS：如何使文本从顶部和底部淡入淡出？
我需要从顶部和底部淡出段落。但我只能从任一侧褪色。
\nHTML：
\n<p className="bottom-overflow-fade">\n {content}\n</p>\nCSS：
\n.bottom-overflow-fade {\n mask-image: linear-gradient(to bottom, black 80%, transparent 100%);\n -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);\n}\n\n.top-overflow-fade {\n mask-image: linear-gradient(to top, black 80%, transparent 100%);\n -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);\n}\n当前结果：
\n
问题：
\n如果我将这两个类名添加到段落中，淡入淡出将\xe2\x80\x99t 工作。如果我使用其中任何一个，那么顶部和底部的淡入淡出效果都很完美。是否可以将这两个 CSS 属性合并为一个，以便顶部和底部淡入淡出都起作用？
\n注意：我不是在谈论任何动画。
\n4
推荐指数
推荐指数
1
解决办法
解决办法
4580
查看次数
查看次数
将蒙版应用于盒子阴影
我有一个mask应用了 a 的 div 。我注意到我不能box-shadow在同一个 div 上应用 a，所以我必须将阴影移动到“包装器”div。
问题是，如果将阴影放置在阴影 div 上，则mask不会应用于阴影。
如何将 a 应用于maskdiv 及其阴影？
.wrapper {
width: 200px;
height: 200px;
box-shadow: 17px 13px 7px 3px rgba(0,0,0,0.75);
}
.b {
width: 200px;
height: 200px;
background-color: yellow;
border: 2px solid black;
-webkit-mask: radial-gradient(
circle at center top,
transparent 30px,
black 31px
) top / 100% 51%,
radial-gradient(
circle at right bottom,
transparent 30px,
black 31px
) right bottom / 51% 51%,
radial-gradient(
circle …4
推荐指数
推荐指数
1
解决办法
解决办法
798
查看次数
查看次数
遮罩图像，从多个渐变创建矩形
我有一个径向渐变，用作mask-image将图像“淡化”到图像background-color 后面。
mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
如何在所有四个边上使用均匀的矩形渐变获得相同的效果？
我知道您可以组合渐变，而我最近的尝试似乎没有任何效果：
img
{
mask-image:
linear-gradient(to top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to right, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to bottom, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to left, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%);
}
3
推荐指数
推荐指数
1
解决办法
解决办法
828
查看次数
查看次数
svg 作为背景图像，带有遮罩来更改颜色，并带有阴影来显示阴影
我是 html 和 css 编码的初学者，所以有一个关于 svg 的问题。当我使用 svg 作为背景图像并想要更改颜色并给出阴影时，它不能同时使用这两个属性。希望可以有人帮帮我：
.image-container {
width: 100px;
height: 100px;
background-size: 100%;
background-color: #E1A95F;
-webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg");
-webkit-mask-size: cover;
filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
} <div class="image-container"></div>
3
推荐指数
推荐指数
1
解决办法
解决办法
4187
查看次数
查看次数