# CSS Tricks

## 1. 圖片與圖片的上下邊界會有 8px 的距離

## 2.讓文字顯示在背景圖片上的正中間

```markup
      <div
        style={{
          backgroundImage: `url(${board_bg})`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
          backgroundColor: " rgb(11, 13, 15)",
          backgroundPosition: "50% 50%",
          width: "100vw",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
      ....
```

## 3.Noise Animation

{% embed url="<https://css-tricks.com/snippets/css/animated-grainy-texture/>" %}

## 4. 移除 Mobile 的 hover 效果

hover 於手機頁面顯示時偶爾會出現上一個選擇的元素也觸發 hover 效果的 bug，可以使用如下

```javascript
  @media (hover: hover) { // Disable hover effect on mobile
    :hover {
      color: #1890ff;
    }
  }
```

{% embed url="<https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/>" %}

## 5.  linear-gradient 產生效果

讓 顏色後面接續著 transparent 並且在同個 % 可產生以下效果

![](https://4163569081-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0u4DAtuAfToE3sxIg5%2Fuploads%2F2Qsqrd4MldAsbkTVYIQx%2F%E6%88%AA%E5%9C%96%202022-10-28%20%E4%B8%8A%E5%8D%8810.54.05.png?alt=media\&token=2eeec511-1d6d-4de9-a2b8-ee2137a9928d)

![](https://4163569081-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0u4DAtuAfToE3sxIg5%2Fuploads%2FwKouIs86FCsKPnRH9eed%2F%E6%88%AA%E5%9C%96%202022-10-28%20%E4%B8%8A%E5%8D%8810.57.45.png?alt=media\&token=032b22b8-2579-48d5-936f-4624a4d9848e)

或是更進階的三層

![](https://4163569081-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0u4DAtuAfToE3sxIg5%2Fuploads%2Ft9yd5J0GtCQFFjV5NhYe%2F%E6%88%AA%E5%9C%96%202022-10-28%20%E4%B8%8A%E5%8D%8811.30.43.png?alt=media\&token=d92a5c7c-89b5-4352-a68d-e357eca27c9d)

```css
background: 
linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 20px) calc(100% - 0px) no-repeat, 
linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 10px) no-repeat, 
linear-gradient(90deg, #48abe0 5%, transparent 5%, transparent 95%, #48abe0 5%)
```

## 6. 網格狀背景

![](https://4163569081-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0u4DAtuAfToE3sxIg5%2Fuploads%2FzEuOZ0TMZSAhuL2PvLaW%2F%E6%88%AA%E5%9C%96%202022-10-28%20%E4%B8%8A%E5%8D%8811.39.37.png?alt=media\&token=0e3d0d02-125c-48ff-94dc-7a6269b3185b)

<https://stackoverflow.com/a/32861765/4622645>