# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easonwang.gitbook.io/web_basic/css-advance/css-tricks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.