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;

  代码方案

  <!--特别说明，因为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>

  效果图

  

  代码案例地址

• code案例

  参考文档

• w3c background-size