CSS3打造磨砂玻璃的背景

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

crper

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

阅读量1.8w

点赞数 2

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 CSS3及HTML5折腾记文章标签： css3 css3磨砂玻璃 css玻璃效果

本文链接：https://blog.csdn.net/crper/article/details/50462812

版权

本文介绍了从《CSS Secrets》一书中获取的灵感，如何利用CSS3实现磨砂玻璃背景效果。通过简洁的代码实现，兼顾性能和维护性，如使用em单位和hsla颜色值，提供了一种灵活且视觉友好的背景效果解决方案。

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

简介

这个效果是在看CSS Secrets这书上看到的,感觉很不错;
实现原理也挺简单的;

效果图及实现

效果图

这里写图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                    /**
                     * 设置背景图全屏覆盖及固定
                     * 设置内部元素偏移
                     */
                    body {
    
	                    /*此处背景图自行替换*/
                        background: