2、美化网页元素
本章目标：
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>
2024年10月15日
CSS技术分享：粗ps-reduced transparency：降低透明度媒体查询。
分享一下最近看到的一个ado发布的一个scr，降低透明度的新媒体查询功能，就这个preferred reduced transparency，它是一个支持CSS媒体查询，识别到在系统设置这个降低透明度的特性。
比如在系统里面设置降低透明度的时候可以看到如果不开启，默认是这个边栏，菜单栏是有一定透明度的可以很好的和背景融合在一起。如果是开启了就可以看到其实就是一个没有透明度，是打印的一个颜色，就是刚好和ui的主题色是对应的一个白色。
2024年10月15日
有这样一个需求，就是在一个DIV中包含有一个Image标签，但是在Div标签中包含有一张背景图片，设计图上的样子是这张背景图片是有一个透明度的，但是如果直接使用opacity属性设置的的话就会连Div中的内容的透明度也会受到影响，那么我们如何在HTML中设置div背景图片的透明度呢？，可以通过以下几种方法实现。
2024年10月15日
如果在图片上显示文字，经常会遇到这个情况，就是当文字和背景颜色差不多时，文字会看不清楚，我们一般通过给文字加text shadow或者修改图片的透明度来让文字显示更加突出。我们今天说一下透明度的问题，一般我们干这个活儿是通过photoshop来做，其实CSS本身也可以实现类似的效果。如何做？
咱们先从下面这个例子开始，有一张背景图片，上面有些文字：
对应的显示效果如下：