css透明度、毛玻璃效果
透明度:
1、opacity 背景颜色和字体同时透明
2.background:rgba(255,255,255,0.2); 只是背景颜色透明,字体不透明
代码:
.info{background-image: url(pineapple.jpg);width:300px;height:300px; } p{background-color: rgba(255,255,255,0.8);opacity:0.2;height:100px; }
毛玻璃效果:CSS filter
- 模糊背景部分, 应用了filter:blur(size)的元素的所有子孙元素都会被模糊处理(不是因为继承),即使子孙元素脱离了该元素的文档流也不能避免。
- 只对login-box背后部分模糊处理。解决方案是在login-box下层加一个与之重叠的元素,对此元素应用filter:blur(<blur_size>);,可以选择用伪元素:
代码:
<div class="bg"><!--最外层包裹框,背景图片很鲜艳亮眼position:fixed--><div class='blur-box'><!--登录表单框部分position:fixed--></div> </div>
.bg{background:url(1.jpg) no-repeat center center fixed;/* 与下面的 blur_box:before 中的 background 设置一样 */width:100%;height:100%; }.blur_box{z-index: 0;/* 为不影响内容显示必须为最高层 */position: relative;overflow: hidden; }.blur-box::before{content:'';position:absolute; /* 固定模糊层位置 */top:0;left:0;right:0;bottom:0;background:url(1.jpg) no-repeat center center fixed;/* 与上面的 bg 中的background设置一样 */filter:blur(10px) contrast(.8); /* 值越大越模糊 */z-index:-1; /* 模糊层在最下面 */
/* 还可以设置 width、height 来设置模糊曾的宽和高 */
}
转载于:https://www.cnblogs.com/luwanying/p/10469886.html
css透明度、毛玻璃效果相关推荐
- css实现毛玻璃效果
首先我们要知道实现毛玻璃效果的关键点:filter滤镜 html代码 <div class="main"></div> 先写一个居中的div,并给body加 ...
- UI妹子说我用CSS实现毛玻璃效果的样子很帅
前言 UI小姐姐问我,能不能做出透明加模糊的背景,而我当然是二话不说就说可以.因为我觉得没有什么是css实现不了的.更何况我要在她面前展现得我很厉害的样子. 开发起来 果不其然,在我打开蓝湖后,发现属 ...
- 自学前端之CSS实现毛玻璃效果
我们知道,页面中有一种非常好看的效果就是毛玻璃,我们先看一下效果图 接下来我们就具体实现一下这个效果 先看HTML 在body中设置一张背景图片 然后设置一个div,用来作为卡片,也是我们需要的毛玻璃 ...
- css 实现毛玻璃效果
前言 最近在参加一个项目的时候,需要实现毛玻璃的效果,一开始想简单的使用背景透明度rgba或者filter:blur,来实现. 遇到问题: 1.只使用透明度不能准确的实现毛玻璃的效果. 2.如果单独的 ...
- 纯css实现毛玻璃效果
2019独角兽企业重金招聘Python工程师标准>>> 最近有用到毛玻璃效果,在此记录,一方面方便以后使用,另一方面也分享给其他朋友. 先上图: 通过对比,就可以看到效果还是很不错, ...
- 一行CSS实现毛玻璃效果
想要iOS上的那种毛玻璃设计,在百度搜索的前几排回答,实现效果实在是太复杂,而且不完美. 不完美之处是,百度的回答是将after伪元素设置背景图片后在虚化,这样的话不是背景图片不就虚化不了了吗?? 还 ...
- CSS揭秘——毛玻璃效果
为了方便把CSS写在一起了:点击测试 例子 <!DOCTYPE html> <html lang="en"><head><meta cha ...
- 关于css实现毛玻璃效果
参考: https://www.cnblogs.com/ghost-xyx/p/5677168.html 人家的效果图: https://darylxyx.github.io/Demo/blur 如果 ...
- 【css】毛玻璃效果,背景高斯模糊
关键属性:backdrop-filter 参考了Apple 官网,参数与 Apple 官网一致 // 背景高斯模糊 @supports (-webkit-backdrop-filter: satura ...
- php毛玻璃,使用css怎么实现毛玻璃效果?
使用css怎么实现毛玻璃效果?下面本篇文章给大家介绍一下使用css实现毛玻璃效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 其实毛玻璃的模糊效果技术上比较简单,只是用到了 ...
最新文章
- (C++)CSP 201712-2 游戏
- bool类型返回值_Python 到底是强类型语言,还是弱类型语言?
- e.target与e.currentTarget的作用
- Java中New一个对象是个怎么样的过程?
- JS判断数字字母中文
- linux查看终端进程,Linux查看进程
- OrchardCore 如何动态加载模块?
- 数据结构实验二 树和二叉树的实现
- linux 怎么创建接口文件,我们如何在Linux上创建多个虚拟接口?
- python3+selenium入门12-警告框处理
- 赶紧收藏!这些思维导图软件,手机上也能用
- php汉字utf8编码转换,PHP UTF8编码内的繁简转换类
- 竞价被恶意点击怎么办?该怎么屏蔽?
- Ubuntu20.04LTS环境下载STM32程序
- 蜂巢3.0(原 素材管理器)开发笔记
- 限界上下文(BC)是什么
- Web前端学习6个有效果软件,你值得拥有!
- JavaScript自用
- 高斯 默克托投影知识
- STM32F103代码远程升级(三)基于YModem协议串口升级程序的实现
热门文章
- 达人评测酷睿9 11900h和i7 12700h选哪个好 i911900h和i712700h对比
- 如何开启电脑的图片解锁功能和关闭电脑的图片解锁功能?
- Java概述及初识【详解篇1】
- Twain Practice
- 九八k神曲用计算机怎么弹,常用多音字(双面打印版)
- Scrum认证体系培训和新CSP成长路径所需的SEU学分
- antv g2plot可视化图表在vue中的使用之四:为图表添加事件
- 巨准私域案例拆解丨揭秘养生品牌如何做到从0到1000万私域用户
- 十堰市人民小学一年级在计算机学校,2019年十堰市小学入学条件年满6岁及入学所需材料...
- MATLAB figure图局部图放大