论坛 › 马黑黑教程专版 › CSS:mask之使用渐变背景做遮罩

马黑黑 发表于 2024-1-13 12:49

CSS:mask之使用渐变背景做遮罩

<style>
.pa { font: normal 18px/24px sans-serif; }
.pa p { margin: 10px 0; }
.pa pre { padding: 10px; background: #eee; font-size: 16px; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
.mybox {
        width: 450px;
        height: 300px;
        background: url('https://img95.699pic.com/photo/50029/2676.jpg_wh300.jpg!/fh/300/quality/90') no-repeat center/cover;
        mask: radial-gradient(circle at 60% center, black 40%, transparent 50%, transparent 0);
        -webkit-mask: radial-gradient(circle at 60% center, black 40%, transparent 50%, transparent 0);
}
.mybox1 {
        position: relative;
        width: 450px;
        height: 300px;
        background: url('https://img95.699pic.com/photo/50029/2676.jpg_wh300.jpg!/fh/300/quality/90') no-repeat center/cover;
}
.mybox1::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: url('https://ts1.cn.mm.bing.net/th/id/R-C.d3692409118a2292537089557b9c56e4?rik=tTMX2OBV8LX%2fBw&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50163%2f1813.jpg_wh300.jpg&ehk=RRhkktZW5LSDJlKKvXGj5gWfmVpHIO2UuNTjwf8bP5Q%3d&risl=&pid=ImgRaw&r=0') no-repeat center/cover;
        mask: linear-gradient(to right, red 50%, transparent 60%, transparent 0);
        -webkit-mask: linear-gradient(to right, red 50%, transparent 60%, transparent 0);
}
.txtGreen { color: green; }
</style>

<div class="pa">

<h2>CSS:mask之使用渐变背景做遮罩</h2>
<p>CSS渐变背景至少需要两种颜色参与，当我们设置其中一种颜色为透明色（transparent），便可实现mask用透明色遮挡元素背景的遮罩功能。下面我们先以径向渐变做个示范：</p>
<pre>
<span class="txtGreen">/* css代码 */</span>
.mybox {
        width: 450px;
        height: 300px;
        background: url('背景图片地址') no-repeat center/cover;
        -webkit-mask: radial-gradient(circle at 60% center, black 40%, transparent 50%, transparent 0);
}

<span class="txtGreen">&lt;!-- HTML代码 --&gt;</span>
&lt;div class="mybox"&gt;&lt;/div&gt;
</pre>
<div class="mybox"></div>
<p>在 mask 属性中，我们使用径向渐变 radial-gradient 设置同等于遮罩位图的效果，该径向渐变是个圆形（circle），圆心在 60% center 坐标处，颜色设两种（黑色和透明色）、三个渐变子项，它们都有百分比规定颜色的作用范围：黑色 40%，第一个透明色 50%，第二个透明色到结束位置，黑色到第一个透明色之所以这么设置，是为了让颜色的过渡有个缓变区间，40%~50%的地带是渐变的，这样能让颜色过渡不突兀（否则边缘会出现过大的过渡区间或锯齿）。黑色在径向渐变圆的中心，向四周发散到40%处开始过渡为透明，到50%处为全透明，如此，黑色部分遮罩下的底图得以呈现，透明部分遮罩的被剪裁掉，显示出来的圆形底图的边缘是慢慢过渡为透明的，整体看上去有立体圆球的感觉。</p>
<p>我们再以线性渐变做一个示范：让两张堆叠在一起的图片融合为一个整体。</p>
<pre>
<span class="txtGreen">/* css代码 */</span>
.mybox1 {
        position: relative;
        width: 450px;
        height: 300px;
        background: url('图片地址一') no-repeat center/cover;
}
.mybox1::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: url('图片地址二') no-repeat center/cover;
        -webkit-mask: linear-gradient(to right, red 50%, transparent 60%, transparent 0);
}

<span class="txtGreen">&lt;!-- HTML代码 --&gt;</span>
&lt;div class="mybox1"&gt;&lt;/div&gt;
</pre>
<div class="mybox1"></div>
<p>相同尺寸的宿主元素和伪元素，宿主元素会被伪元素覆盖，但当伪元素巧妙设置了 mask 属性，就会出现令人惊奇的“融合”效果。这里，我们为伪元素设置了 mask 属性，用了三个向右铺开的颜色子项，红色在 50% 处终止，这是伪元素呈现自己的底图的区间，这个区间之后是第一个透明色，该透明色在 60%处终止，然后是第二个透明色囊括剩余的区间。由于伪元素右边是透明色，伪元素的底图在这一区域不显示，就能露出宿主元素对应部分的底图。重要的地方是，在50%~60之间红色到第一个透明色的变化是渐变的，是这个渐变部分让两张背景图片的过渡几乎融为一体——当然，我们这个范例的效果还不是非常理想，想要做到更为完美的程度，或许需要更合适的图片和更精细的设置。</p>
<p>最后补充说明一下：mask 属性最好加上 -webkit- 前缀以兼容Chromium内核较低的浏览器，或者，为保险起见，有前缀和没有前缀的都写上：</p>

<pre>
mask: linear-gradient(to right, red 50%, transparent 60%, transparent 0);
-webkit-mask: linear-gradient(to right, red 50%, transparent 60%, transparent 0);
</pre>

起个网名好难 发表于 2024-1-13 13:13

已经不知道要如何赞才好了。
https://www.sznews.com/news/pic/2021-06/23/2a0e9f52-1046-4125-9c9a-6a6918c1ee57.jpg

红影 发表于 2024-1-13 14:56

这个遮罩真好，跟抠图似的，可以得到自己想要的部分，还能直接跟底图融合{:4_199:}

红影 发表于 2024-1-13 14:59

线性渐变看懂了，向右的就是宽度的50%吧，向上就是长度的。径向渐变里的百分比是参照的什么，短边的么？

樵歌 发表于 2024-1-13 15:22

俺终于看出点道道了，那健身的美女和河边照相的美女融和在一起了{:4_334:}

醉美水芙蓉 发表于 2024-1-13 16:51

醉美水芙蓉 发表于 2024-1-13 16:53

醉美水芙蓉 发表于 2024-1-13 16:54

马黑黑 发表于 2024-1-13 17:31

醉美水芙蓉 发表于 2024-1-13 16:53
其实这个播放器溶图亚伦老师制作过，只不过方法好像没有黑黑老师的简单！

实现方式会有很多

马黑黑 发表于 2024-1-13 17:32

樵歌 发表于 2024-1-13 15:22
俺终于看出点道道了，那健身的美女和河边照相的美女融和在一起了

{:4_170:}

马黑黑 发表于 2024-1-13 17:32

起个网名好难 发表于 2024-1-13 13:13
已经不知道要如何赞才好了。

感谢支持

马黑黑 发表于 2024-1-13 17:32

红影 发表于 2024-1-13 14:56
这个遮罩真好，跟抠图似的，可以得到自己想要的部分，还能直接跟底图融合

不过，这和抠图还是有本质区别的

马黑黑 发表于 2024-1-13 17:39

红影 发表于 2024-1-13 14:59
线性渐变看懂了，向右的就是宽度的50%吧，向上就是长度的。径向渐变里的百分比是参照的什么，短边的么？

径向渐变一般以元素中心（可定义圆弧中心位置）为出发点，默认以弧形（可定义为圆形（circle）向四周扩散。圆弧有半径，系统会自己计算短半径和长半径，我们如果不设置颜色的终止位置，它会将相邻的两种颜色融合在一个特定区域，形成颜色过渡，设置颜色终止位置，相邻两种颜色之间突兀过渡，至于参照，径向渐变以圆弧中心为参照。

起个网名好难 发表于 2024-1-13 18:40

马黑黑 发表于 2024-1-13 17:32
感谢支持

晚上好！

transparent 0 可有可无吧？

樵歌 发表于 2024-1-13 19:09

马黑黑 发表于 2024-1-13 17:32


要是弄个帅哥过去会肿么样{:4_189:}

红影 发表于 2024-1-13 20:04

醉美水芙蓉 发表于 2024-1-13 16:54
红影美女你懂代码，先做个瞧瞧呢？

我也不懂啊，我也是跟在后面学呢{:4_173:}

红影 发表于 2024-1-13 20:05

马黑黑 发表于 2024-1-13 17:32
不过，这和抠图还是有本质区别的

是的，还可以设置过渡部分，这个抠图做不了。

红影 发表于 2024-1-13 20:07

马黑黑 发表于 2024-1-13 17:39
径向渐变一般以元素中心（可定义圆弧中心位置）为出发点，默认以弧形（可定义为圆形（circle）向四周扩散 ...

这个我知道，我是说比如尺寸70%，是谁的尺寸？如果直接是数字好理解，比如200px就是从圆心出发的值。但是百分比少许有点迷糊。

马黑黑 发表于 2024-1-13 22:18

红影 发表于 2024-1-13 20:07
这个我知道，我是说比如尺寸70%，是谁的尺寸？如果直接是数字好理解，比如200px就是从圆心出发的值。但是 ...

数学没学透{:4_170:}

百分比看用在什么地方。基于background和mask的 size 的百分比，比如 25% 50% / 81% 中的 81% 就是尺寸（background-size或mask-size），指背景图片或遮罩图片的宽高的比例。

红影 发表于 2024-1-14 12:13

马黑黑 发表于 2024-1-13 22:18
数学没学透

百分比看用在什么地方。基于background和mask的 size 的百分比，比如 25% 50% /...

我就是不明白什么时候指的背景图什么时候指的遮罩图的啊。
我还是先去试个玩玩吧，做了可能就知道了{:4_173:}

查看完整版本: CSS:mask之使用渐变背景做遮罩