前言
大家好，今天与大家一起学习分享css3中的background-size,background-clip使用与实践。
知识点讲解
background-size
一般情况下，我们设置的背景图与背景为完全匹配，但也有情况是可能不匹配的，或者大或者小，那么当尺寸不匹配时，你希望如何控制尺寸呢？这就是background-size的价值所在。
可能取值：px|percentage|cover|contain,详细说明如下：
| 取值 | 说明 |
|---|---|
| px | 设置背景图像的宽度和高度，如果只设置一个，第二个被认为auto |
| percentage | 设置背景图像的宽度和高度，如果只设置一个，第二个被认为auto |
| contain | 缩放背景图像，让其能显示完整 |
| cover | 缩放其图像，让其能完全覆盖区域，但可能背景显示不全 |
- 兼容性：ie9+以及现代浏览器
background-clip
背景裁剪一般用于控制其背景的显示策略，显示覆盖区域，常规默认是覆盖全部也就是border-box的。
可能取值：padding-box|content-box|border-box,与box-sizing一致的取值范围。
- 兼容性：ie9+以及现代浏览器
代码实践
场景讲解
在下面的实践中我们主要实现一个全屏背景中的注册窗，效果有以下几点是需要完成的：
- 背景全屏效果
- 背景模糊效果
- 注册窗水平垂直居中
- 注册表格内容与边框之间有透明背景映射
方案讲解
- 背景全屏效果：background-size:cover;
- 背景模糊效果，用filter:blur(10px)实现.其他的有兴趣的可以百度css3 filter ，查看菜鸟教程或者w3c介绍。 其语法如下：filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
- 注册窗水平垂直居中用绝对定位加margin修正(略)
- 背景裁剪，background-clip:content-box;
代码方案
<!--特别说明，因为filter效果会影响到子元素，所以我们背景层单独用了一个mask样式元素-->
<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>
效果图
