# Rainy Text Effects
[竹白記事本](https://chupainotebook.blogspot.com/2019/02/css-effect.html)，學習紀錄，2019/02/26。

>[CSS Rainy Text Effects | Html CSS Photoshop](https://www.youtube.com/watch?v=do8hIQ9H9aY)

###### tags: `background-attachment` `background-clip` `filter`

## CodePen
>[CodePen：Rainy Text Effects](https://codepen.io/chupai/pen/aMoLOq)
<iframe height="500" style="width: 100%;" scrolling="no" title="CSS Rainy Text Effects | Html CSS" src="//codepen.io/chupai/embed/aMoLOq/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/aMoLOq/'>CSS Rainy Text Effects | Html CSS</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## background-attachment
>[意想不到的 background-attachment](https://wcc723.github.io/css/2013/09/25/background-att/)

- `scroll`，預設值，背景圖會隨著外圍頁面滾動而移動。
- `fixed`，不管外面、裡面怎麼滾，背景圖都是不會動的。
- `local`，自己的區塊內如果滾動時，背景圖也會跟著移動。

## background-clip
>[background-clip｜MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip)

設置元素的背景（背景圖片或顏色）是否延伸到邊框下面。

- `border-box`，背景延伸至邊框外沿（但是在邊框下層）。
- `padding-box`，背景延伸至內邊距（padding）外沿。不會繪制到邊框處。
- `content-box`，背景被裁剪至內容區（content box）外沿。
- `text`，背景被裁剪成文字的前景色。

## text-fill-color
>[text-fill-color｜HTML 中文網](https://www.html.cn/book/css/properties/only-webkit/text-fill-color.htm)

覆蓋 color 所定義的字體顏色。

默認值：`transparen`

## filter
>[filter｜MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)

將糢糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像，背景和邊框的渲染。

- `grayscale`，灰階
- `sepia`，懷舊
- `saturate`，飽和
- `hue-rotate`，色相旋轉
- `invert`，負片
- `opacity`，不透明
- `brightness`，亮度
- `contrast`，對比
- `blur`，糢糊
- `drop-shadow`，下拉陰影