大家好,今天与大家一起学习分享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>