CSS ::backdrop

::backdrop伪元素就是控制需要视觉聚焦的元素后面的背景元素样式的。

CSS代码：
/* 给全屏时候视频背景加个透明 */
video::backdrop {background-color: #fff;background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);background-size: 16px 16px;background-position: 0 0, 8px 8px;
}
HTML代码：
<video src="./fish.mp4" width="480" height="270" controls></video>

::backdrop伪元素兼容：

CSS ::backdrop相关推荐

带有 HTML5 ＜dialog＞ Tag的原生弹出窗口对话框
对话框和灯箱广泛用于网站和应用程序.在此之前,它们需要定制--使用一系列<div>来创建容器,设置对话框的 CSS 使其居中,并使用 Javascript 事件处理程序来显示/隐藏模式框. ...
css删除li 圆点_六种设计难题的CSS实用技巧！
前言最近在恶补css的知识,看到<css揭秘>一书,如获至宝.下面节选一部分笔记. 一.扩大按钮的点击范围对于哪些较小的.难以瞄准的控件来说,如果不能把它的视觉尺寸直接放大,将其可点击 ...
《CSS揭秘》读书笔记
摘要 <CSS揭秘>主要是介绍了使用CSS的技巧,通过47个案例来灵活的使用CSS进行实现,同时在实现过程中注重CSS代码的灵活性与健壮性.通过阅读这本书有利于我们编写高质量的CSS代码以 ...
[css] 有哪些标签是不支持伪元素的？
[css] 有哪些标签是不支持伪元素的? 首先我们要知道伪元素有哪些: ::after ::before ::first-letter ::fist-line (单双冒号皆可) ::selection ...
css 左边阴影_css揭秘-用户体验
选用合适的鼠标光标难题鼠标指针的用途不仅在于显示鼠标在屏幕上的位置,还可以告诉用户当前可以执行什么动作.这在桌面应用程序中是十分普遍的用户体验实践,但在网页应用中却往往被忽视. 解决方案 css3 ...
《CSS揭秘》-总结47个Css技巧（一）：常用的背景与边框技巧
注:本文案例来源于<CSS揭秘>这本书. 1. 设置半透明边框无效? 使用 background-clip padding-box 解决. background white backgro ...
如何看懂html和css,怎么能看懂css
**: Preparation of graphics准备图片 1)Design your logo according to your site name(根据网站名称设计你的logo ) 2)Pa ...
常用的css特效（一）
1.交错动画 <div class="loading"><div class="dot"></div><div cla ...
ng bootstrap css,Angular2学习笔记-ng bootstrap中motal组件使用
ng bootstrap是一个angular UI bootstrap库,里面包含了一些基本的UI组件(日期选择组件,按钮,下拉框等).目前的版本为v1.0.0-alpha.14,基于angular2 ...
几种通过阴影来弱化背景的CSS方法
几种通过阴影来弱化背景的CSS方法 2016-10-08 09:10 网页设计标签:css 1288 发表评论很多时候,我们需要一层半透明的遮罩层来把后面的一些整体调暗,以便凸 ...

CSS ::backdrop

CSS ::backdrop相关推荐

最新文章

热门文章