哪个网站做音基的题不花钱,应用关键词优化,wordpress 网址导航 主题,html5搭建手机网站前言#xff1a;什么叫滤镜呢#xff0c;就是把元素里的像素点通过一套算法转换成新的像素点#xff0c;这就叫滤镜。而算法有 drop-shadow、blur、contrast、grayscale、hue-rotate 等。我们可以通过这些算法实现一些常见的 css 样式。
1. drop-shadow 图片阴影
可以用来…前言什么叫滤镜呢就是把元素里的像素点通过一套算法转换成新的像素点这就叫滤镜。而算法有 drop-shadow、blur、contrast、grayscale、hue-rotate 等。我们可以通过这些算法实现一些常见的 css 样式。
1. drop-shadow 图片阴影
可以用来设置图片阴影相较于 box-shadow 设置盒子阴影drop-shadow 设置的是元素中的像素点的阴影用法基本和 box-shadow 一致。例子如下给图像设置阴影。背景透明人物图像是博主自己用 ps 扣的有点瑕疵别介意。网上下不到素材全是收费的过分。
素材图 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyleimg {filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));}/style/headbodyimg src/demo.png //body
/html
效果图 2. blur 高斯模糊
里面传入一个值这个值叫模糊半径值越大越模糊。可以用来设置毛玻璃效果。什么叫毛玻璃效果呢就是透过设置了毛玻璃效果的元素看遮挡下的元素是模糊的效果就叫毛玻璃效果。那就不能用 filter 了因为 filter 是让当前元素像素点参与计算需要用到 drop-filterdrop-filter 是让当前元素下面盖着的元素参与计算。例子如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.contain {width: 500px;height: 500px;margin: 200px auto;position: relative;}p {position: absolute;top: 0;z-index: 998;}.box {position: absolute;top: 0;height: 270px;width: 450px;border-radius: 25px;background: rgba(47, 185, 203, 0.2);backdrop-filter: blur(5px);border: 2px solid rgba(47, 185, 203, 0.1);box-shadow: 0 0 80px rgba(47, 185, 203, 0.1);overflow: hidden;z-index: 999;}/style/headbodydiv classcontainp这是一个磨砂玻璃样式下的一些文字这是一个磨砂玻璃样式下的一些文字这是一个磨砂玻璃样式下的一些文字这是一个磨砂玻璃样式下的一些文字这是一个磨砂玻璃样式下的一些文字这是一个磨砂玻璃样式下的一些文字/pdiv classbox/div/div/body
/html 3. contrast 对比度
contrast 设置对比度默认值是 1这个值越大对比度越大什么叫对比度呢就是白的越白黑的越黑。颜色之间的对比越明显。
可以配合 blur 模糊做字体效果。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {background: #fff;color: #000;filter: contrast(30);}h1 {margin: 0;font-size: 10em;filter: blur(10px);}/style/headbodydiv classboxh1666/h1/div/body
/html 4. grayscale 灰度
grayscale 设置灰度当值设为 1 时元素里的所有像素点就变成灰度值这个属性很有用当遇到纪念日时需要把网站变成黑白的就可以在
html 元素中设置灰度。打开百度找到在 html 下设置灰度值。
html {filter: grayscale(1);
} 5. hue-rotate 色相环
hue-rotate 设置色相环它可以调整像素点的色相函数里面的角度就是色相环上对应的颜色。
