圆月山庄资源网 Design By www.vgjia.com
简介
这个效果是在看CSS Secrets这书上看到的,感觉很不错;
实现原理也挺简单的;
效果图及实现
效果图
代码实现
CSS Code复制内容到剪贴板- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- /**
- * 设置背景图全屏覆盖及固定
- * 设置内部元素偏移
- */
- body {
- /*此处背景图自行替换*/
- background: url(demo.jpg) 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;
- }
- /**
- * 整体居中功能;
- * 背景透明虚化
- * 溢出隐藏
- * 边缘圆角化
- * 文字增加淡阴影
- */
- .description{
- position: relative;
- margin: 0 auto;
- padding: 1em;
- max-width: 23em;
- background: hsla(0,0%,100%,.25) border-box;
- overflow: hidden;
- border-radius: .3em;
- box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
- 0 .5em 1em rgba(0, 0, 0, 0.6);
- text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
- }
- /*使用滤镜模糊边缘*/
- .description::before{
- content: '';
- position: absolute;
- top: 0; rightright: 0; bottombottom: 0; left: 0;
- margin: -30px;
- z-index: -1;
- -webkit-filter: blur(20px);
- filter: blur(20px);
- }
- </style>
- </head>
- <body>
- <p class="description">
- 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.
- </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:0 0;
- background-size:cover;
- /*简写*/
- background: #ff0 url(background.gif) no-repeat / fixed cover;
- /*设置background-size必须用单斜杠隔开*/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]