《CSS揭秘》之毛玻璃效果知识点

实现代码：

HTML:

<main>
  <blockquote>
    <em>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em>
    <footer>— 
      <cite>Oscar Wilde, The Picture of Dorian Gray
      </cite>
    </footer>
  </blockquote> 
</main>

CSS：

body {
  font: 150%/1.6 Baskerville, Palatino, serif;
}

body, main::before {
  background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
}

main{
  width: 50%;
  background: hsla(0,0%,100%,.3);
  position: relative;
  margin: 0 auto;
  overflow: hidden; // 将溢出的模糊部分隐藏
}

main::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; // 学习这种一行写法
  margin: -30px;
  z-index: -1;  // 隐藏在main之后
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

知识点解析

1. CSS 简写

【font 属性】：

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

可以简写成下面的：

font: italic bold .8em/1.2 Arial, sans-serif;

CSS Font 简写属性手册

【background 属性】：

CSS2.1

// 使用的背景颜色
background-color: color;
// 使用的背景图像
background-image: url(...);
// 如何重复背景图像
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
// 背景图像是否固定或者随着页面的其余部分滚动
background-attachment: scroll || fixed || local;
// 背景图像的位置，可以取3种类型的值：length values/percentages/keywords
background-position: 100px 5px || 100% 5% || top right

CSS3

// 背景图片的尺寸：5种语法可使用
background-size: keywords || one-value || two-value || multiple bg || global value
// 背景图片的定位区域，在边框内或者内边距内等
background-origin: border-box || padding-box || cntent-box || inherit;
// 背景的显示区域，已经定好位了，通过边框等进行限制其显示的大小
background-clip: border-box || padding-box || content-box || inherit;

简写方式如下：

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];