background-clip

前言

最近看到华为商城里一个炫酷的css样式，想扒源码看看，但是没想到是个视频，自己动手写了一下，效果是有的，但是只有一半，但是想到一个新的想法，没有实现。

文字背后是视频

1 了解background-clip

这是w3c官方文档里的三个值。

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

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

但是我在网络上搜到了text值，文档写了仅有chrome 支持，想用就加上-webkit-background-clip:text;这个属性，想完成上边的样式，就要用到两个属性 color: transparent; -webkit-background-clip: text;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>杨帆向海</title>
</head>
<style>.clip {font-size: 400px;position: relative;background-image: url(https://tse1-mm.cn.bing.net/th/id/R-C.f7dc93ee3d7b4ea28f934400e91b8e98?rik=VMRnJ8WWSx%2bK1Q&riu=http%3a%2f%2fimg95.699pic.com%2fdesgin_photo%2f40168%2f0187_list.jpg&ehk=pSXj0KYh36hVu%2fRFV1K0sftvUYZwnUw%2frSFm2CW5mVM%3d&risl=&pid=ImgRaw&r=0);border: 1px solid red ;-webkit-background-clip: text;color: transparent; }
</style>
<body><div><div class="clip">防疫防控</div></div>
</body>
<script></script>
</html>

到此为止，实现的是文字里边的内容替换为图片，想要的是替换成视频。

我的一个不成熟的想法是让除了文字以为的区域变成背景色，然后给字体加个透明 opacity: 0; 然后视频放文字后边，现在想不到什么方法实现，记录一下

background-clip相关推荐

css3-background clip 和background origin
1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...
css的background
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-p_w_upload,还为我们介绍了它 ...
CSS3详解：background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个 ...
CSS3之background的调整和增加的属性
对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个背景图片 ...
CSS中的background的详细属性
本文转自:http://blog.sina.com.cn/s/blog_969555e3010135s6.html css2中有五个与背景相关的属性.它们是: background-color:完全填 ...
css 前端设计师必知的background属性（有CSS3内容）
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-attachment,还为我们介绍了它 ...
前端设计师必知的background属性（有CSS3内容）
转自: http://www.cnblogs.com/biko-zc/archive/2009/09/09/1563545.html 背景属性--background是css中的核心属性.你应该对它有 ...
【CSS3教程】CSS3基础常用技巧实例集合
为什么80%的码农都做不了架构师?>>> CSS3常用技巧 CSS3下条纹&方格斜纹背景的实现一.效果抢先:CSS3下的条纹背景demo 这些美丽的纹饰全部都是由CS ...
CSS3中背景的四个新的属性
本文对CSS3中背景的四个新的属性进行了详细介绍. 多重背景图片 Css3中,对一个元素可以使用一张以上的背景图片.除了使用逗号将图片分开以外,其代码与css2相同.第一个声明的图片定位在元素的顶部, ...
吴恩达深度学习5.3练习_Sequence Models_Trigger word detection
转载自吴恩达老师深度学习课程作业notebook Trigger Word Detection Welcome to the final programming assignment of this ...

background-clip

前言

1 了解background-clip

background-clip相关推荐

最新文章

热门文章