Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[zh-TW]: update CSS/background-attachment #25016

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+31 −25
Open

[zh-TW]: update CSS/background-attachment #25016

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 31 additions & 25 deletions files/zh-tw/web/css/background-attachment/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,54 @@
---
title: background-attachment
slug: Web/CSS/background-attachment
l10n:
sourceCommit: 50c8e290f11b061bbf2267e1a3279f28180a5fcb
---

{{CSSRef}}

**`background-attachment`** 這個 [CSS](/zh-TW/docs/Web/CSS) 屬性能夠設定，背景圖片的位置是否要固定在 {{glossary("viewport")}}（視圖）上，還是背景圖片會隨著它的 containing block（外層容器）一起滾動。
**`background-attachment`** [CSS](/zh-TW/docs/Web/CSS) 屬性設定背景圖片的位置是否固定在{{glossary("viewport", "視區")}}內，或者跟隨其包含區塊一起滑動。

{{EmbedInteractiveExample("pages/css/background-attachment.html")}}

## 語法

```css
/* Keyword values */
/* 關鍵字值 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* Global values */
/* 全域值 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: revert-layer;
background-attachment: unset;
```

`background-attachment` 屬性的值，可以是下方清單中的其中之一。
`background-attachment` 屬性可設定為以下列舉值之一。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`background-attachment` 屬性可設定為以下列舉值之一。
`background-attachment` 屬性可設定為以下列舉的關鍵字值之一。


### Values
### 值

- `fixed`
- : 讓背景相對於 viewport（視圖）的移動是固定的。即便元素中的內容是可滾動的，背景也不會在滾動元素內容時跟著移動。(這個屬性與 {{cssxref("background-clip", "background-clip: text", "#text")}} 不相容。)
- : 背景相對於視區固定。即使元素有滑動機制，背景也不會跟著元素移動。
- `local`
- : 讓背景相對於元素的內容是固定的，且背景在滾動元素的內容時會跟著移動。另外，背景的繪製與定位區域是相對於元素的可滾動區域，而不是包裹著它們的邊框。
- : 背景相對於元素內容固定。如果元素有滑動機制，背景會跟隨元素內容一起滑動，且背景的繪製區域與定位區域是相對於元素的可滑動區域，而不是邊框。
- `scroll`
- : 讓背景相對於元素本身是固定的，使背景在滾動元素的內容時不會跟著移動。（It is effectively attached to the element's border.）
- : 背景相對於元素本身固定，並且不會隨內容滑動。（它實際上是附加於元素邊框的。）

### Formal syntax
## 形式定義

{{cssinfo}}

## 形式語法

{{csssyntax}}

## 例子
## 範例

### Simple example
### 簡單範例

#### HTML

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

翻译一下 HTML

Expand All @@ -56,18 +64,18 @@ background-attachment: unset;

```css
p {
background-image: url("starsolid.gif");
background-image: url("star-solid.gif");
background-attachment: fixed;
}
```

#### Result
#### 結果

{{EmbedLiveSample("Simple_example")}}
{{EmbedLiveSample("Simple_example", "簡單範例")}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

其他的 PR 也检查一下，有没有用错的情况

Suggested change
{{EmbedLiveSample("Simple_example", "簡單範例")}}
{{EmbedLiveSample("簡單範例")}}


### Multiple background images
### 多重背景圖片

這個屬性支援多個背景圖片。你可以對每個背景設定不同的 `<attachment>`。每個背景圖片會依序對應在 `<attachment>` 設定的類型。
此屬性支援多個背景圖片。可以為每個背景指定不同的 `<attachment>`，以逗號分隔。每張圖片會與對應的 `<attachment>` 類型匹配，順序由先指定到後。

#### HTML

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

下面的 HTML 也请翻译一下

Expand All @@ -91,26 +99,24 @@ p {

```css
p {
background-image: url("starsolid.gif"), url("startransparent.gif");
background-image: url("star-solid.gif"), url("star-transparent.gif");
background-attachment: fixed, scroll;
background-repeat: no-repeat, repeat-y;
}
```

#### Result
#### 結果

{{EmbedLiveSample("Multiple_background_images")}}
{{EmbedLiveSample("Multiple_background_images", "多重背景圖片")}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{{EmbedLiveSample("Multiple_background_images", "多重背景圖片")}}
{{EmbedLiveSample("多重背景圖片")}}


## Specifications
## 規範

{{Specifications}}

{{cssinfo}}

## Browser compatibility
## 瀏覽器相容性

{{Compat}}

## See also
## 參見

- [Using multiple backgrounds](/zh-TW/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds)
- [使用多重背景](/zh-TW/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds)
Loading