> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_basic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_basic/css-advance/css-tricks.md).

# 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 並且在同個 % 可產生以下效果

![](/files/c9rH28RRksywXrNRC1i0)

![](/files/Qbn2TegmGKhaR9icLfnW)

或是更進階的三層

![](/files/axdTSNu5fCRikMDMy76y)

```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. 網格狀背景

![](/files/E6ACGsLAajzVMmwQGdKE)

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