神奇的CSS，页面镂空文字（渐变文字升级）

实现镂空文字的原理就是两个重合的div，底层的div上正在使用视频、GIF、图片皆可，顶层的div上面输出想要镂空的文字，然后通过-webkit-background-clip: text;进行文字的裁切镂空，color为transparent透明即可实现效果。

底层为一张背景图，亦可以放GIF或者视频*
语法 background-clip: border-box|padding-box|content-box;
值描述
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
CSS代码实现（一）：

*{
margin: 0;
padding: 0;
font-family: ‘微软雅黑’, cursive;
}

.div_loukong1 {
height: 100%;
width: 100%;
font-size: 350px;
font-weight: 900;
text-align: center;
background-image: url("…/img/****.gif");
background-size: 200% 100%;
/裁减掉文字以外的背景/
-webkit-background-clip: text;
/设置文字填充色为透明/
color: transparent;
}
CSS代码实现（二）：

.div_loukong2 {
margin: auto;
width: 60%;
height: 800px;
line-height: 100px;
text-align: center;
font-size: 50px;
font-weight: bold;
color: transparent;
background: url(‘https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=453201562,784291000&fm=26&gp=0.jpg’) no-repeat center center;
background-size: cover;
-webkit-background-clip: text;
}

神奇的CSS，页面镂空文字（渐变文字升级）相关推荐

CSS书写优美的文字样式（透明、模糊、镂空、渐变、图片背景文字）
前言做页面涉及字体的时候,最多就是换个color换个font-family,总是觉得不够华丽美艳,这时就需要我们自己动手丰衣足食的去"创造"一些css样式字体呢? 透明文字用r ...
css 实现简单的镂空渐变文字效果
css 实现简单的镂空渐变文字 html: <body><div class="box">hello</div> </body> c ...
【CSS 文字渐变、背景渐变实现方式】
CSS 文字渐变,背景渐变的几种实现方式在我们日常页面开发当中,使用合适的css渐变效果能让我们的界面更加美观,赏心悦目. 一.CSS 文字渐变: 首先,文字渐变实际上是通过背景渐变裁剪成文字的前景 ...
css 实现文字渐变以及文字颜色流动
文字渐变需要了解以下属性: background-image:背景色 background-clip:此属性规定背景的绘制区域,有四个值: border-box,背景被裁剪到边框盒. padding- ...
CSS冷门属性 mix-blend-mode 制作文字镂空效果
CSS冷门属性 mix-blend-mode 制作文字镂空效果本篇文章为大家带来如何制作文字镂空效果,仅仅使用CSS样式进行处理,借助 mix-blend-mode 属性,将文字的颜色反转,从而实现 ...
[css] 如何取消页面中选中的文字？
[css] 如何取消页面中选中的文字? user-select: none; /* browser-specific values */ -moz-user-select: none; -webkit ...
CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码:  <div id="moml"> <div style="text-al ...
css实现文字渐变并兼容IE浏览器
css实现文字渐变并兼容IE浏览器 css文字渐变写法 color: #fff; background: linear-gradient(to bottom, #fff5b9, #f3d380); - ...
css伪类渐变,CSS3文字渐变内发光投影效果_css
前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-sh ...
html css如何渐变阴影,CSS 实现文字阴影 + 文字渐变色
1. CSS 实现文字阴影通过text-shadow属性可以为文字设置阴影 .text-shadow { font-size: 30px; color: maroon; text-shadow: 5 ...

神奇的CSS，页面镂空文字（渐变文字升级）

神奇的CSS，页面镂空文字（渐变文字升级）相关推荐

最新文章

热门文章