mask-image element()功能符图片与遮罩效果示意实例页面

回到相关文章 »

效果：

作为图片的标题文字

下面是原始图：

代码：

CSS代码：

#title {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: -webkit-element(#title);
    mask-image: -moz-element(#title);
    mask-image: element(#title);
}

HTML代码：

<h4 id="title">作为图片的标题文字</h4>
<img src="ps1.jpg" class="mask-image">