前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Css媒体查询-降低透明度效果(css设置透明度的两种方法)

CSS技术分享:粗ps-reduced transparency:降低透明度媒体查询。

分享一下最近看到的一个ado发布的一个scr,降低透明度的新媒体查询功能,就这个preferred reduced transparency,它是一个支持CSS媒体查询,识别到在系统设置这个降低透明度的特性。

比如在系统里面设置降低透明度的时候可以看到如果不开启,默认是这个边栏,菜单栏是有一定透明度的可以很好的和背景融合在一起。如果是开启了就可以看到其实就是一个没有透明度,是打印的一个颜色,就是刚好和ui的主题色是对应的一个白色。

你这个在代码中可以通过最新的、最新的媒体选择器来识别到,来识别到是否有开启了降低透明的效果。这个没查询,比如原来的透明度是0.5,这是一个变量,透明度0.5。如果识别把透明度变成0.95,那么一个盒子的盒子的背景颜色透明度也会进行改变。

·来看结构,首先是有个div,然后下面有个隐秘值,这个隐秘值是绝对定位的,始终保持在左上角的位置。

·然后这个盒子上面这个盒子就是在它的层级的上面是有透明度的,现在我是开启了一个降低透明的效果的。如果把它关闭可以看到透明度是会更透明一点,可以看到底下盒子的内容。

这个是因为这部分逻辑,比如说识别到透明度之后会把透明度的值变成0.95,那么就会变得不那么透明。比如现在是没有开启降低透明度的,它的OPPCITY是0.5,所以可以很清楚的从这里看到下面图片上的内容。如果开启了降低透明,那么这里的值就会变成0.95,这里的值就变成0.95,所以它的背景颜色的值也是0.95,所以就变得没有那么透明。

这就是一个最新发现的cs的新米查询,关于降低透明度的新特性。村望老弟。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言