这篇文章主要介绍“css怎么使用磨砂背景”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css怎么使用磨砂背景”文章能帮助大家解决问题。

代码实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>/***设置背景图全屏覆盖及固定*设置内部元素偏移*/body{/*此处背景图自行替换*/background:url(demo.jpg)no-repeatcentercenterfixed;background-size:cover;min-height:100vh;box-sizing:border-box;margin:0;padding-top:calc(50vh-6em);font:150%/1.6Baskerville,Palatino,serif;}/***整体居中功能；*背景透明虚化*溢出隐藏*边缘圆角化*文字增加淡阴影*/.description{position:relative;margin:0auto;padding:1em;max-width:23em;background:hsla(0,0%,100%,.25)border-box;overflow:hidden;border-radius:.3em;box-shadow:0001pxhsla(0,0%,100%,.3)inset,0.5em1emrgba(0,0,0,0.6);text-shadow:01px1pxhsla(0,0%,100%,.3);}/*使用滤镜模糊边缘*/.description::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;margin:-30px;z-index:-1;-webkit-filter:blur(20px);filter:blur(20px);}</style></head><body><pclass="description">Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</p></body></html>总结

这种实现模式是考虑了性能来写的,以及维护上的考虑

比如使用了 em,可以很轻松的放大缩小整体大小

这里使用了 hsla,这是我第一次使用这个颜色值;以前只在 ps 调整这个,很不错的颜色模式.和 RGBA 大同小异,但是 HSLA 更符合人类眼睛的观看;

还学到了一种新的背景缩写方式

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

关于“css怎么使用磨砂背景”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。