大家好,今天与大家一起学习分享css3中的background-size,background-clip使用与实践。
一般情况下,我们设置的背景图与背景为完全匹配,但也有情况是可能不匹配的,或者大或者小,那么当尺寸不匹配时,你希望如何控制尺寸呢?这就是background-size的价值所在。
可能取值:px|percentage|cover|contain,详细说明如下:
取值 | 说明 |
---|---|
px | 设置背景图像的宽度和高度,如果只设置一个,第二个被认为auto |
percentage | 设置背景图像的宽度和高度,如果只设置一个,第二个被认为auto |
contain | 缩放背景图像,让其能显示完整 |
cover | 缩放其图像,让其能完全覆盖区域,但可能背景显示不全 |
背景裁剪一般用于控制其背景的显示策略,显示覆盖区域,常规默认是覆盖全部也就是border-box的。
可能取值:padding-box|content-box|border-box,与box-sizing一致的取值范围。
在下面的实践中我们主要实现一个全屏背景中的注册窗,效果有以下几点是需要完成的: – 背景全屏效果 – 背景模糊效果 – 注册窗水平垂直居中 – 注册表格内容与边框之间有透明背景映射
<div class="mask"> </div> <form class="m-login"> <h2>立即注册</h2> </form> <style> *{ margin:0; padding:0; border:none; box-sizing:border-box; } html,body{ height:100%; } .mask{ height:100%; background:url(https://study.miaov.com/img/pc/remote_chapter/bannerBg.png) no-repeat center; background-size:cover; position:relative; filter: blur(6px); } .m-login{ position:absolute; width:500px; height:250px; border-radius:10px; border:1px solid #fff; top:50%; left:50%; margin-top:-100px; margin-left:-250px; padding:5px; background:#fff; background-clip:content-box; font-size:14px; h2{ text-align:center; line-height:40px; } } </style>
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句