简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > Web Front-end > CSS Tutorial > body text

CSS3打造磨砂玻璃背景效果

黄舟
Release： 2017-01-22 17:31:59
Original
2336 people have browsed it

简介

这个效果是在看CSS Secrets这书上看到的,感觉很不错; 

实现原理也挺简单的;

效果图及实现

效果图

780.jpg

代码实现

   

       

           

               

            Document   

               

           

           

            
   

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo   

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse   

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non   

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Copy after login

总结

这种实现模式是考虑了性能来写的,以及维护上的考虑
- 比如使用了em,可以很轻松的放大缩小整体大小
- 这里使用了hsla,这是我第一次使用这个颜色值;以前只在ps调整这个,很不错的颜色模式.和RGBA大同小异,但是HSLA更符合人类眼睛的观看;
- 还学到了一种新的背景缩写方式

/*分开写*/    
  
    background-color:#ff0;     
  
    background-image:url(background.gif);     
  
    background-repeat:no-repeat;     
  
    background-attachment:fixed;     
  
    background-position:0 0;     
  
    background-size:cover;     
  
        
  
    /*简写*/    
  
    background: #ff0 url(background.gif) no-repeat / fixed cover;     
  
    /*设置background-size必须用单斜杠隔开*/
Copy after login

以上就是CSS3打造磨砂玻璃背景效果的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Related labels：
CSS3，磨砂玻璃，背景效果
source：php.cn
Previous article：CSS3模拟IOS滑动开关效果 Next article：css中如何做到居中效果
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Latest Articles by Author
Latest Issues
Learn how to feather the edges of blocks using CSS How do I modify my CSS so that the edges of the box have a feathered blur effect? I would ...
From 2023-08-16 18:38:07
0 1 342
javascript - 如何在CSS毛玻璃效果上添加文字？ 最近写了一个简单的毛玻璃效果，操作流程是以一个图片为背景并模糊，同时再在此背景上加上一层半透明的效果就制成毛玻璃的特效，但是想在毛玻璃上输入文字却一直不显示，求一下问题出在哪里？如...
From 2017-04-11 11:18:03
0 2 605
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！