與我學css3：background-size,background-clip

前言

你們好，今天與你們一塊兒學習分享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>
複製代碼

效果圖

代碼案例地址

• code案例

參考文檔

• w3c background-size