css实现磨砂效果

最新推荐文章于 2024-08-10 14:29:40 发布

Ace.三阶斗尊

最新推荐文章于 2024-08-10 14:29:40 发布

阅读量5.9k

点赞数

分类专栏： css 文章标签： css 磨砂效果滤镜

本文链接：https://blog.csdn.net/qq_42231156/article/details/101203553

版权

本文介绍了两种使用CSS实现磨砂效果的方法：1. 利用滤镜属性filter；2. 通过设置带有滤镜效果的背景图片。并提供了一个1.png图片作为示例。

摘要由CSDN通过智能技术生成

1. css的滤镜实现：通过filter实现。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       body {
	                    /*此处背景图自行替换*/
                        background: green no-repeat center center fixed;
                        background-size: cover;
                         min-height: 100vh;
                        box-sizing: border-box;
                        margin: 0;
                        padding-top: calc(50vh - 6em);
                        font: 150%/1.6 Baskerville, Palatino, serif;
                    }

                    /**
                     * 整体居中功能；
                     * 背景透明虚化
                     * 溢出隐藏