css实现文字镂空和遮罩效果（background-clip或者 -webkit-text-stroke）

background-clip定义和用法

background-clip 属性规定背景的绘制区域。

默认值：	border-box
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.backgroundClip="content-box"

语法

background-clip: border-box|padding-box|content-box;

值	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

文字镂空效果

除上面几个属性值之外，还有一个属性值：

 -webkit-background-clip: text;

描述：裁减掉文字以外的背景。效果如下：

如果只有裁剪，无法实现上图所示效果。搭配上另外一个css属性使的字体透明显现背景图，即可完成。

-webkit-text-fill-color: transparent;//设置文字填充色为透明
//color:transparent;

考虑到color的继承性和应用范围，建议使用-webkit-text-fill-color只作用于字体。

代码如下：

css：

.mt-text {-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: url(./img/1.jpg);background-repeat: no-repeat;border: 2px dashed;
}

html：

<div class="mt-text">hello MT</div>

同样，将底图颜色设置成渐变，即实现字体颜色渐变效果。

css渐变

-webkit-text-stroke

.hollow{-webkit-text-stroke: 3px #000;color: transparent;
}

遮罩

-webkit-mask-image

html

<div class="lable">MARK</div>

css

.lable{-webkit-mask-image: url(./img/txtpattern.png);border: 4px solid;
}

效果

底图

或

css实现文字镂空和遮罩效果（background-clip或者 -webkit-text-stroke）相关推荐

CSS实现文字镂空效果炫酷背景效果
CSS实现文字镂空效果炫酷背景效果 css3中的mix-blend-mode css3中有一个mix-blend-mode的screen混合模式,可以轻松实现镂空文字效果.背景我们可以固定定位设置一个 ...
CSS设置文字镂空效果
CSS设置文字镂空效果 color设置transparent,也就是透明 -webkit-text-stroke: 1px @theme-font-color;可以自定义边框的宽度和颜色 color: ...
css实现文字中间横线,css实现文字居中两边横线效果的示例代码
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下: 效果: content="width=device-width, user-scalable=no, init ...
用css实现文字的渐渐浮现效果
可以使用 CSS 的 animation 属性来实现文字的渐渐浮现效果. 首先,你需要给要实现这个效果的文字元素设置一个 animation 属性,并指定一个动画名称.例如: .fade-in {an ...
CSS实现文字动画炫酷效果
span{//设置文字动画背景动图background:url(https://www.17sucai.com/preview/776331/2019-07-28/asw/img/giphy.gif) ...
02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
css实现简单的头像遮罩效果
css代码 .img {position: relative;background: url("")no-repeat;background-size: 100%;width: 2 ...
纯css实现文字跳动的动画效果
以下图片为截图所得,所以为静态展示具体实现的详细代码如下,可直接cv复用: html部分代码: <h1 class="my-words"><span>H& ...
html文字左右两边有居中的直线,css怎么实现文字居中两边横线效果
css怎么实现文字居中两边横线效果发布时间:2021-03-19 09:50:44 来源:亿速云阅读:92 作者:小新这篇文章将为大家详细讲解有关css怎么实现文字居中两边横线效果,小编觉得挺实 ...