CSS mask/-webkit-mask在safari中不起作用
CSS mask属性用于创建一个遮罩，可以用来隐藏或显示元素的某些部分。而-webkit-mask是Safari浏览器的私有属性，用于设置元素的遮罩。
在Safari浏览器中，CSS mask/-webkit-mask属性可能不起作用的原因有多种可能，下面列举一些常见的原因和解决方法：
- 浏览器兼容性：不同浏览器对CSS属性的支持程度不同。如果Safari版本较旧或不支持该属性，则无法正常工作。解决方法是检查Safari浏览器版本，并根据兼容性表格或文档确定所支持的属性版本。
- 前缀使用错误：某些浏览器需要使用特定的浏览器前缀才能正确解析CSS属性。在Safari中，需要使用-webkit-前缀来支持-webkit-mask属性。确保在代码中正确使用了前缀。
- 元素定位问题：mask属性可能无法正常工作，如果元素没有正确定位或被其他元素覆盖。请确保元素正确定位并处于正常的层叠顺序中。
- 遮罩图片问题：如果遮罩使用了一个图片作为遮罩，可能存在图片加载失败或路径错误的问题。请检查图片路径是否正确，并确保图片能够成功加载。
- CSS属性顺序问题：有时，CSS属性的顺序可能会导致一些属性不起作用。尝试改变属性的顺序，确保mask属性在正确的位置。
如果以上方法仍然无法解决问题，可以考虑使用其他方式实现遮罩效果，例如使用其他CSS属性或JavaScript库来实现相同的效果。
腾讯云相关产品中，没有特定与CSS mask属性相关的产品。腾讯云提供了丰富的云计算产品，如云服务器、云数据库、云存储等，可以满足云计算需求。具体产品介绍和详细信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我有一个项目，我试图绘制一个具有渐变边界的圆。我已经让它在Chrome中工作了。但是这个样式在safari中不起作用。我不知道为什么它行不通。我为safari添加了一个mask:版本。 .gradient-circle {
height: 10rem;
width: 10rem;
--b: 5px;
/* border width*/
display: inline-block;
margin: 10px;
z-index: 0;
position:relative;
}
.gradient-circle:before {
content:
浏览 119提问于2021-02-01得票数 0
回答已采纳
1回答
我有这个虚线图案，我想在那里淡出底部。我使用了一个从透明到背景颜色的线性梯度的伪元素。
在firefox中，它看起来很好，但是在safari (14.1.1)中，由于某些原因，它看起来很奇怪
有人知道怎么解决这个问题吗？
:root {
--main-color:#05e2ff
}
body {
background-color: var(--main-color);
}
.line {
position:relative;
浏览 1提问于2021-07-13得票数 0
回答已采纳
目标是用css模糊图像的右侧，仅举一个例子：
所以正如你所看到的，他们在图像的顶部涂上了模糊的一面。我试过背景滤镜，但没有工作，我也不知道如何处理面具和剪辑路径.
浏览 6提问于2022-02-09得票数 -1
回答已采纳
3回答
我想通过使用渐变来创建一个ambilight效果。
在css3中，可以让梯度从top to bottom、bottom to top、left to right或right to left中移动，并且可以使用多种颜色。但只有一个方向。
我想结合一个图像的4个区域，通过计算每个区域的平均或主导颜色，然后使用梯度为图像创建一个背景。
我考虑使用多个渐变，但当您创建一个梯度、ac、和另一个bd，并将两者都放在图片后面时，看起来就不太好了。(我标记了关键区域。)
你知道怎么做吗？
编辑：我不想在渐变之间混合颜色，就像在图片中一样。我对各种颜色之间的平滑浮动感到满意。
EDIT2:我上传了一个
浏览 6提问于2013-07-06得票数 9
回答已采纳
1回答
想让我的面具在火狐中工作，会让我觉得被困住了。然而，已经花了很多时间在研究上，但没有成功。也许，我错过了一些显而易见的东西，如果人们能帮我看一眼，我会非常感激的。
这里的想法是： (在CodePen中的FF中工作，但我尝试直接实现相同的代码，它在FF中不起作用)。
我的实现如下(html)：
<html>
<head>
<link href="./styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
浏览 4提问于2016-07-06得票数 0
是否可以应用CSS滤镜，其参数值取决于渐变？例如，我想在网页的右上角应用+15°的色调旋转，在左下角应用-15°的色调旋转，并在它们之间应用平滑的颜色渐变(两者之间的任何点都应该像应用了hue-rotate(some number between -15 and +15) on一样)。 我知道梯度可以很容易地作为背景生成，但我想在过滤器本身上生成一个梯度。
浏览 33提问于2020-04-14得票数 0
回答已采纳
1回答
我想要像下面的图片一样的css剪辑路径 有人能帮帮我吗？ ? img {
clip-path: polygon(53% 0%, 100% 1%, 100% 50%, 100% 100%, 55% 100%, 42% 65%, 0% 52%, 44% 36%);
border-radius:0 100% 100% 0
} <img src="http://lorempixel.com/400/400/">
浏览 14提问于2020-12-02得票数 2
回答已采纳
2回答
遮罩图像
、
我试图用css制作这张带有2个蒙版的图像，但我什么也没得到。我尝试使用此页面中的代码示例：
我的两张图片是：
和
我不能让它在我的生命中工作。有没有人可以在这里给我展示一下如何正确地遮罩图像？
浏览 0提问于2011-02-12得票数 1
回答已采纳
我正在将一个基于UI的游戏从Unity移植到Cordova。在Unity中，我使用各种颜色对以白色为主的图像进行着色，以重用资源。粗略的CSS等价物似乎使用了设置为multiply的主要标准background-blend-mode属性，并在背景中使用所需的色调颜色作为bg颜色。
.tinted {
background-image: url('theimg.png');
background-size: 100% 100%;
background-color: #0f0;
background-blend-mode: multiply;
}
问题是它不能保持图
浏览 11提问于2018-01-19得票数 0
回答已采纳
2回答
我正在尝试使用webkit- mask -size来使遮罩图像更小。如下所示：
.myClass {
width: 100%;
height: 100%;
background: #ffffff;
-webkit-mask-size: 50% 50%;
-webkit-mask: url(../css/images/myimage.png) center center;
}
应用了myClass的div有一个设置了固定高度的父容器。
无论我给它设置-webkit-mask-size，都没有区别。
浏览 1提问于2013-08-29得票数 5
回答已采纳
我有以下HTML： <div class="shimmer">
<a href="somePage" target="_blank"><img src="someImage"></a>
<a href="otherPage" target="_blank"><img src="otherImage"></a>
</div> CSS： .shimmer img{
color:
浏览 31提问于2021-11-09得票数 0
问题：
以下svg代码在浏览器中不工作：
<svg width="207" height="209" viewBox="0 0 207 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M96.2318 8.29356C149.379 4.30837 195.684 44.2918 199.657
浏览 3提问于2019-11-29得票数 1
回答已采纳
1回答
当我尝试在CSS变量上使用带有不透明度设置的rgba时，遇到了一个问题。颜色是一个动态十六进制变量，它在一个名为--primaryColor的变量中定义。
我只是想知道我是不是做错了什么，或者是否有不同的方法来解决这个问题。下面是代码。
:root {
--primaryColor: #006CB4;
}
.section-title {
border-bottom: 2px solid rgba(var(--primaryColor), 0.65);
}
如果我只是把十六进制代码放进去就行了，但问题是，原色变量是在应用程序的其他地方动态设置的，所以它必然会改变，因此，它必须
浏览 14提问于2020-07-30得票数 2
? 它有320px宽，但当容器增长时，我只希望svg的宽度增长，保持中心圆的大小不变 ? <svg width="320" height="64" viewBox="0 0 320 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M160 39C177.673 39 192 24.67
浏览 14提问于2021-01-27得票数 0
我能够使用以下代码在CSS中实现以下边界(见图)：
.bottom,
.up,
.left,
.right {
height: 30vh;
position: relative;
background: black;
margin-bottom: 15px;
width: 50vw;
margin-inline: auto;
}
/* Text styling */
.bottom,
.up,
.left,
.right {
color: #fff;
text-align: center;
font-weight: bold;
font-siz
浏览 3提问于2022-08-16得票数 0
下面有两张图片，如下所示。
图像1
图像2
我想将这两个图像与css合并，并期望像下面的图像那样。
期望图像
请帮助我设置这样的图像。
我试过剪辑路径，但一无所获：
div {
background:url(https://i.stack.imgur.com/zzeP9.png);
background-size:contain;
height:200px;
clip-path:url(https://i.stack.imgur.com/PkKi6.png)
}
<div ></div>
提前谢谢。
浏览 4提问于2020-12-06得票数 1
回答已采纳
2回答
将图像用作另一个图像的掩码。
、、、、
我正在制作一个网站，我想成为一个白色的页面，你可以邮票，以使另一张图片出现在下面。所以当你点击的时候，你做了一个凹凸。就像这个例子：
所以，当我点击时，我设法在背景中得到了一个随机的图像，这对我想要的东西来说是很好的，并且能够.append()全息图。，但我不知道如何做面具的事情，我一直在网上挖一些东西和帮助，并设法使它在某些情况下工作，但不是那个.
应该是这样的(我猜)：
backgroundwhite形状中的图像在前面的星型是在白色的中形成一个凹凸形。
现在，我唯一能做的就是除了一个更大的凹凸(这是我原来的img)，但当我点击它不做任何掏空，它只是添加邮票。
以下是代码：
var
浏览 11提问于2020-12-06得票数 2
回答已采纳
1回答
如何在保持形状的情况下将图像放在此png图像上？在CSS中？ 我已经看到有办法做到这一点与SVG剪辑路径，但我想知道是否有一个更快的方法，只是设置为背景图像或其他什么？ 谢谢，如果这是个愚蠢的问题，很抱歉。 ?
浏览 6提问于2021-03-22得票数 2
回答已采纳
1回答
我试着在CSS方面做得更好，我让我的朋友用photoshop画了一个网站，她给我出了个难题。这是我试图复制的背景：
我找到了一个关于制作的示例，并将其改编为：
#circleBackground {
z-index: 0;
position: relative;
margin: -10px;
height: 100vh;
background: #7ecafb;
--mask: linear-gradient(to bottom right, #7ecafb, rgba(0,0,0, 0.45));
}
#circleBack
浏览 0提问于2020-05-17得票数 1
我有一个通过导入的SVG .nav-arrow::after {
content: url(data:image/svg+xml;base64,xevr...);
} 现在我想通过CSS定义笔划的颜色，这是不起作用的。您是否知道如何在不使用任何HTML的情况下导入SVG，同时仍然能够对其进行样式设置？ 这是我的SVG： <svg class="nav-arrow" height="40" width="40">
<g fill="#fff">
<path stroke
浏览 191提问于2020-04-02得票数 0
回答已采纳
尝试在div上使用一些CSS，并将其掩蔽为特定的形状。其概念是创建一个div，将该div掩蔽成一个形状(比如一个人的轮廓)，并对该div应用一些背景css渐变。本质上是得到一个人的渐变轮廓，我可以很容易地通过改变css颜色来改变颜色。
我一直在尝试使用-webkit-mask (如下所示：)，但似乎无法在div/span/任何目录上使用它
有人做过类似的事吗？B
浏览 1提问于2011-03-22得票数 2
我在工具栏中创建了几个带有自定义图标的按钮。然而，事实证明，这些图标都是黑色的，而不是它们的原始颜色。我怎么才能用CSS来实现呢？
谢谢!
浏览 0提问于2011-08-31得票数 0
回答已采纳
1回答
我试图使一些HTML和CSS看起来像收据。我希望这张收据的底部看起来像是被撕掉了一样。我得到了一个：：在看起来很接近我想要的风格之后，然而在移动设备上，它出现了一些奇怪的线条。我需要一个响应的设计，看上去很好的移动屏幕大小。
这是我要找的设计：
下面是我用奇怪的线条出现的尝试：
下面是我正在使用的代码：
body {
background: black;
}
.StyledReceipt {
background-color: #fff;
width: 22rem;
position: relative;
padding: 1rem;
box-
浏览 1提问于2022-08-31得票数 8
回答已采纳
1回答
如何在CSS蒙版中添加阴影？
、、、、
我可以在由SVG蒙版制作的裁切图中有阴影吗？ 下面是我正在使用的代码 index.html <div class="content">
<section id="home-section">
</section>
...
</div> styles.css #home-section {
background: url(img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
浏览 29提问于2021-01-24得票数 1
回答已采纳
如何使两个图像显示在我的下图中，仅使用CSS？这些照片都是完美的正方形，我知道这样做不会显示图像的一部分。这是故意的。中间的差距只是我糟糕的绘画技巧，它不应该在那里。
此外，如果有可能在他们相遇的地方有一个很好的褪色效果，那就更好了，但是我假设CSS没有这种魔力。
浏览 11提问于2022-11-18得票数 0
回答已采纳
1回答
我是HTML/CSS的中级初学者，我想要在像Figma或XD这样的设计软件中做一个非常容易做到的效果，这是文本背后的模糊背景。我读过关于background-clip、backdrop-filter和普通filter CSS属性的文章，但我不知道是否有可能将这些属性组合在一起，形成一个模糊其背后任何东西的文本。
我用Figma制作了一个简单的模型，以展示我想要的效果，以及互联网上的其他问题--这些问题不是我想要做的：
这在HTML和CSS中是可能的吗？如果是的话，我会怎样做呢？我愿意接受在最近的Chrome版本和/或需要JavaScript的任何工作。
浏览 2提问于2022-01-04得票数 1
回答已采纳
1回答
我试着制作一个以PNG图像作为背景图像的饼图：
.piebg {
width: 95px;
height: 95px;
border-radius: 50%;
background-image: url('https://pngimg.com/uploads/pizza/pizza_PNG44095.png');
background-size: cover;
}
.pie {
width: 102px;
height: 102px;
border-radius: 50%;
background: inherit;
}
.pie::b
浏览 3提问于2020-08-06得票数 0
回答已采纳
我正在设计一个网站，我试图在CSS代码中添加一个闪光效果的图像。下面是添加我正在使用的闪光效果的代码(来源：Make CSS Shimmer Effect Work an already loaded Image) .shimmer {
color: grey;
display:inline-block;
-webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
background-repeat: no-repeat;
animation: shimmer 2.5s i
浏览 73提问于2021-11-11得票数 2
我使用下面的实现来屏蔽一个使用SVG和一些CSS的元素。
//styles.css
.elementToBeMasked {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
display: block;
overflow: hidden;
clip-path:url(rhombus.svg#rhombusclip);
-webkit-mask:url(rhombus.svg#rhombus);
-webkit-mask-repeat:no-repe
浏览 2提问于2013-11-27得票数 1
我在svg中画了两个圆，并将其应用于html img标记，但它不起作用，或者我做错了什么。 我想要得到这样的结果，但仅限于img标记。 ? 这是我的尝试。 img {
display: block;
width: 100%;
height: 100%;
mask: url(#mask);
-webkit-mask: url(#mask);
}
html,
body {
margin: 0;
}
.item {
width: 450px;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
浏览 9提问于2021-05-08得票数 1
回答已采纳
1回答
我有一个使用动画旋转的SVG图像，以及它旁边的一个文本元素。每当星光较亮的部分与文字重叠时，我希望文字的那一部分改变颜色。基本上，恒星爆发应该剪辑到文本，同时旋转。
基本设置是：
<div class="header">
<div class="starburst-image">
<img src="starburst-dark.svg" class="starburst"></img>
<img src="starburst-b
浏览 15提问于2022-12-04得票数 0
1回答
夹径内嵌圆
、、、
我有一个平方的图像，并想把它切成一个圆形的中间，看看后面是什么(实际上是一个身体背景图像)。我找到了clip-path的CSS属性，但是我来到这里只是为了用图像创建一个圆，而不是创建一个被我的图像包围的圆圈。
直到现在，我有一个白色的背景，所以我只是创建了一个白色的::after元素，一个内嵌框阴影，但现在我得到了一个背景图像，所以我不能保留它。
有没有一种有或没有剪辑路径的方法来实现这一点？
PS:最终的目标是创造一个音乐乙烯基旋转，所以这个中间洞是必要的！:)
谢谢。
浏览 2提问于2020-03-20得票数 2
回答已采纳
我有一个项目，我需要同时使用剪辑路径和蒙版，以便在div上获得某种渐变着色。我使用剪辑路径和掩码来包含div边框中的颜色。 这在Chrome和Firefox中都能正常工作。但在Safari中，其他元素仍然在被屏蔽的元素后面，无法进行交互。正如您在下面的代码片段中所看到的，我添加了两个示例。一个使用clip-path，另一个使用遮罩。在Safari中，不可能与绿色div进行交互。 #clip-container {
width: 4rem;
height: 3rem;
background-color: yellow;
clip-path: inset(0);
}
#cl
浏览 20提问于2021-03-30得票数 0
回答已采纳
3回答
我试图在右上角有一个锐利的div，但是使用边框-右上角半径。
我在右上角有个圆角。
我们如何使用CSS来实现这一目标？
目前，我是如何获得的圆角，我得到了下面的代码
代码沙箱链接：-
.container {
width: 150px;
height: 150px;
position: relative;
margin: 30px;
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
background: #0057e3
浏览 7提问于2022-06-14得票数 0
回答已采纳
1回答
我有一个元素，我只想在元素的末尾屏蔽它。我设法编写了一些代码来屏蔽元素的末尾，但元素的其余部分现在也被屏蔽了。我想要更改蒙版，以便蒙版左侧的所有元素仍然可见。 .masked {
width: 300px;
height: 30px;
background-color: hotpink;
mask-image: linear-gradient(to right, black, transparent);
mask-size: 30px;
mask-repeat: no-repeat;
mask-position: right;
} <div class=
浏览 32提问于2020-08-19得票数 2
回答已采纳
我能够在一个盒子的左下角完成一个小的截断，使用： background: linear-gradient(
45deg,
transparent 7px,
$color--background 7px
); 但是现在我正在尝试创建同样的东西，但这一次在左上角和右上角都剪掉了2个角。我试着这样做，认为它会切断左上角和左下角，但这不起作用： background: linear-gradient(
45deg,
transparent 7px,
$color--background 7px
), linear-gradient(
135deg,
transpare
浏览 13提问于2020-01-14得票数 0
回答已采纳
2回答
最好使用chrome来打开这个站点，任何webkit浏览器都可以。
当你把鼠标放在上面时，你可以看到那个铬合金徽标的惊人效果。我下载了那个页面的源代码，但不幸的是迷路了。
它使用非标准的css -webkit-mask和-webkit-gradient，如下所示：
-webkit-mask: "-webkit-gradient(radial, 17 17, %s, 17 17, %s," + "from(rgba(0, 0, 0, 1))," + "color-stop(0.5, rgba(0, 0, 0, 0.2))," + "to(
浏览 1提问于2012-10-12得票数 14
回答已采纳
我正在开发一个使用cordova和ExtJS 6的iOS应用程序。一些背景图片显示了一个奇怪的矩形边框，自从iOS 12更新以来(在iOS 11中，红色圆圈中的图标正确地显示为“包含不带矩形的i的圆圈”)：
图标应该是这样的：
我已经知道，只有当SVG-file用作背景图像时，才会发生这种行为。PNG-文件像往常一样渲染，没有边界。
这是我的CSS for This元素(span)：
.elementeTree .myInfo {
-webkit-mask-image: url('./icons/information.svg');
-webkit-mask-posit
浏览 79提问于2018-09-20得票数 2
1回答
我想用CSS创建一个元素的边框--这会消除透明度，直到背景：
这就是目标：
但我所能创造的只是这样一条边界：
.circle {
position: absolute;
top: -15px;
right: -15px;
width: 60px;
height: 60px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: solid 10px rgba(255,0,255,0.5);
浏览 2提问于2022-05-16得票数 2
2回答
CSS渐变顶部的文本
、、、
下面的代码具有不同的渐变，它使用-webkit-mask。我希望能够在梯度上添加一些文本(在这里我有文本)。
以下是当前代码：
.test {
background: radial-gradient(120% 120%, red 30%, #000);
height: 50vh;
}
.test:before {
margin-top: 7.5vh;
height: 50vh;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backgr
浏览 7提问于2022-09-03得票数 0
回答已采纳
1回答
我需要使我的谷歌地图V3一个完整的循环。我在上面使用CSS3边框半径，但是它只在Firfox中正确工作，而其他人只是把它保留为矩形。以下是密码：
<div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; heigh
浏览 0提问于2011-08-01得票数 6
回答已采纳
2回答
所以，我试图在一个元素上创建一个锯齿状的边，边上有一个内斜面，目前我正在使用一个边框图像来管理它，但是我想知道是否可以使用纯css，因为我创建这个站点的人希望能够轻松地改变这个元素的颜色，而有一个边界图像使它变得不那么容易。
我发现这个工具可以用面具()创建一个锯齿状的边缘，这很好，但是因为它是一个面具，所以我不能给它添加任何内嵌框阴影，这就是我通常做斜面的方式。我尝试将元素包装在父div中，并向父元素应用一个下拉阴影过滤器，但不幸的是，拖影过滤器似乎不像框影那样允许嵌入阴影。
有没有办法用纯css来实现这一点，还是我应该坚持边框图像，教他们如何改变png的颜色？
浏览 13提问于2022-11-18得票数 2
回答已采纳
1回答
我现在想知道这是否有可能改变我在CSS中文本的不透明度...但是从中心开始，如果我可以给出一个点(比如宽度的50% )，并在这个精确点上将不透明度设置为0，然后随着我们远离它而增加它。 下面是我想要达到的结果：What I am expecting 这里的问题是我不能修改背景(就像这里做线性背景一样)，因为背景不是单一的颜色：My background 所以..。我在这里我已经能够达到这种状态：My state 通过使用此命令： -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,
浏览 23提问于2021-07-22得票数 1
回答已采纳
我有一个SVG，并且使用带有背景颜色的蒙版来显示SVG，有什么属性可以用来反转蒙版吗？例如：通常情况下，svg掩码不会显示svg后面的任何内容，我如何才能让它以另一种方式发生？
我本以为在这里使用的是掩码复合属性，但浏览器无法识别它(Chrome)
浏览 4提问于2021-02-02得票数 1
.icon {
width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="10" /></svg>');
}
<div class='icon'></d
浏览 0提问于2015-10-30得票数 2
我有一张照片：
白色像素:我想动态地将这些设置为任何颜色的黑色像素:我希望这些像素保持为像素:我希望这些像素通过当前的任何背景显示出来。
下面是一个覆盖在红色背景上的图像的示例：
我希望能够使兔子的任何颜色，我喜欢，而不诉诸背景技巧，因为背景颜色的图像显示是对照，应该显示通过不变。
首选纯CSS解决方案，但也欢迎javascript图像处理想法。
兔子自己：
浏览 5提问于2022-03-15得票数 3
回答已采纳
我试着用HTML和CSS做一个加载程序，但是当我在加载器的中心有信息时会出现一个问题，信息没有显示，原因是我有背景: white；我需要避免显示渐变，因为如果我删除白色并放置透明的渐变就会出现。
所以当我在装载机后面有东西时，我需要解决这个问题。
.loader {
display: flex;
justify-content: center;
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
}
.loader .circle {
background-image:linear-gradient(90deg
浏览 3提问于2020-02-14得票数 4
回答已采纳
1回答
我正在寻找结合背景-滤镜:模糊(XXpx)与波浪边框的解决方案。请参阅附呈的图像。
我已经尝试过SVG波和:之前:后椭圆，但这似乎不是不可能把它与“模糊”。
有人有什么暗示吗？
这段代码在“模糊封面”的顶部形成一条直线：
#css
.blur-filter-over {
position: absolute;
height: calc(100vw*0.105);
max-height: 230px;
width: 100%;
background: linear-gradient(180deg, rgba(70, 60, 92, 0.33)
浏览 4提问于2022-09-05得票数 2
回答已采纳
1回答
我可以在我想要的div上的任何地方应用mask-image，但是我可以在同一个div上应用多个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><
浏览 5提问于2020-11-02得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
