新增第185个小实例：纯CSS实现文字组成肖像特效

README.md

@@ -192,6 +192,7 @@
 182. HTML5+CSS3+JS小实例：霁青+翠蓝的Tabbar动画特效
 183. HTML5+CSS3+JS小实例：蜂巢里的小蜜蜂光标特效
 184. HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效
+185. HTML5+CSS3小实例：纯CSS实现文字组成肖像特效
 
 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

code/185/185.css

@@ -0,0 +1,25 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    background-color: #000;
+    overflow: hidden;
+}
+p{
+    width: 1000px;
+    height: 1000px;
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 14px;
+    /* 居中 */
+    margin: 0 auto;
+    /* 背景图片 */
+    background: url(/images/luobin.jpg) no-repeat;
+    /* 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉 */
+    -webkit-background-clip: text;
+    /* 将文字透明镂空 */
+    -webkit-text-fill-color: transparent;
+    /* 灰度滤镜（转黑白） */
+    filter: grayscale(1);
+}