与我一起学css3:background-size,-clip

前言

大家好，今天与大家一起学习分享css3中的background-size,background-clip使用与实践。

知识点讲解

background-size

一般情况下，我们设置的背景图与背景为完全匹配，但也有情况是可能不匹配的，或者大或者小，那么当尺寸不匹配时，你希望如何控制尺寸呢？这就是background-size的价值所在。

可能取值：px|percentage|cover|contain,详细说明如下：

• 兼容性：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;

代码方案

<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>

效果图

代码案例地址

• code案例

参考文档

• w3c-background-size