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

实现代码：

CodePen：毛玻璃效果

Dabblet：毛玻璃效果

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;

【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];

具体每个属性的取值请参考 CSS-TRICKS、background-size--MDN

参考：

CSS 的简写属性-MDN

CSS简写指南

CSS的 background 简写方式

CSS-TRICKS：★

2. 几种色彩表达方式

参考：CSS进阶：CSS 颜色体系详解

一般情况下，前端使用 hsl 表示颜色会更方便，对于按钮颜色深浅的切换只需改一个参数。

在控制台中审查元素时，对于color，按住 Shift 键可以切换颜色的显示方式。

3. filter

CSS-tricks: filter

MDN-filter