例：
background: rgba(255,255,255,0.2);
兼容ie8
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
#后面的8个数字被拆分为两个部分 33 ffffff他们对应 AA(IEfilter) GGBBAA(GBA)。
2024年10月15日
例：
background: rgba(255,255,255,0.2);
兼容ie8
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
#后面的8个数字被拆分为两个部分 33 ffffff他们对应 AA(IEfilter) GGBBAA(GBA)。
2024年10月15日
一说起隐藏HTML页面上的元素，很多人第一反应就是设置元素的css属性display:none;值，这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法，以及它们的区别。
本篇文章中的例子直接放到github地址中，感兴趣的同学可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html
2024年10月15日
实例
设置一个div元素的透明度级别：
div
{
opacity:0.5;
}
浏览器支持
所有主流浏览器都支持opacity属性。.
注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)
2024年10月15日
background-attachment 定义和用法
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
可能的值
实现背景图片固定的实用代码
2024年10月15日
上篇文章主要讲述了CSS样式更改中的过渡、动画基础知识，这篇文章我们来介绍下CSS样式更改中多列、元素是否可见、图片透明度知识。。
1).创建多列
2024年10月15日
说到对图片进行处理，我们经常会想到PS,美图秀秀这类的图像处理工具。作为前端,全栈开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图片显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。
你以为这些是经过PS软件处理出来的？不不不，只有一张图片,纯粹的是用css写出来的。
本文的目标就是：手把手教大家学习CSS滤镜（filter）属性,CSS滤镜提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。
2024年10月15日
透明度在网页是一个很重要的属性，非常多的特效都需要控制透明度来完成。控制透明度一共有两种方法。
opacity属性指定了一个元素的透明度，这个透明度不仅会影响本元素，也会影响里面的子元素的透明度。
opacity:数值;
2024年10月15日
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <meta content="webkit" name="renderer"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <title>css滤镜</title> </head> <body> <div> <h3>原图</h3> <img src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" /> <h3>高斯模糊滤镜</h3> <h5>为图像设置高斯模糊，值越大越模糊， 默认是0，既不模糊，值的单位是PX</h5> <div style="overflow:hidden;width: 700px;"> <img style="filter: blur(10px);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" /> </div> <h3>亮度调整滤镜</h3> <h5>通过设置brightness(%)来调整图片的亮度，如果值为 0% 图像会全黑，如果值为100%，图像无变化，如果值为100%之上，图像会变得更亮，默认值是1</h5> <div style="overflow:hidden;width: 700px;"> <img style="filter: brightness(40%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" /> </div> <h3>对比度调整滤镜</h3> <h5>通过设置contrast(%)来调整图片的亮度, 单位可以是百分比 和 小数 表示，如果值为 0% 图像会全黑，如果值为100%，图像无变化，如果值为100%之上,图像的对比度更加强,意味着图片的鲜艳度更强，图片更加鲜艳了 白的更白,黑的更黑，默认值是1 小于100%，可以看到图片颜色灰度增加了</h5> <div style="overflow:hidden;width: 700px;"> <img style="filter: contrast(40%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" /> </div> <h3>灰度滤镜</h3> <h5>通过设置grayscale(%)将图片转换成灰度图片,值可以是小数和百分数.默认 0，当值超过100%时完全转换成灰度图片,当值为0% 图像无变化，默认值是1</h5> <div style="overflow:hidden;width: 700px;"> <img style="filter: grayscale(40%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" /> </div> <h3>图像反转滤镜</h3> <h5>上了点年纪的人一般见过胶卷相机，照片的底片那种效果其实就是图片反转效果。比如将黑色反转成白色，其它颜色也反转成其相反的颜色。使用invert(%)可以对其进行控制，其值可以是0-1之间的小数或者百分比，默认值为0。值为100%的时候是完全反转，与0时图像无变化。为50%的时候，所有色彩都变成灰色。</h5> <div style="overflow:hidden;width: 700px;"> <img style="filter: invert(1);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" /> </div> <h3>透明度调整滤镜</h3> <h5>和css设置元素透明度效果一样,不过这个使用滤镜实现的</h5> <div style="overflow:hidden;width: 700px;"> <img style="filter: opacity(0.6);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" /> </div> <h3>饱和度滤镜</h3> <h5>通过设置saturate(%)调整图片的饱和度大小, 当值超过100%时图片饱和度增高,色彩就会变重. 当值为0% 图像完全不饱和 当值为100% 图像无变化</h5> <div style="overflow:hidden;width: 700px;"> <img style="filter: saturate(1.6);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" /> </div> <h3>复古滤镜</h3> <h5>将图片调成深褐色 通过sepia(%)可以将图像调整为深褐色，可以很容易的营造出发黄、复古的效果。该函数的值为0-1之间的数字或者百分比，默认值为0。当值为100%时，图像完全变成深褐色的，值为0%图像无变化。</h5> <div style="overflow:hidden;width: 700px;"> <img style="filter: sepia(100%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" /> </div> <h3>色相旋转滤镜</h3> <h5>通过hue-rotate(deg)可以将图像进行色相旋转。所谓色相旋转，就是指将图像中的各种颜色按照给定的角度在色相环中旋转成新的对应颜色。该函数默认值是Odeg，其值可以上不过超过360deg相当于又转了一圈。</h5> <div style="overflow:hidden;width: 700px;"> <img style="filter: hue-rotate(180deg);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" /> </div> </div> </body> </html>