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.

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

docs(cn): translate utilities/backgrounds.md #77

Merged
merged 3 commits into from
Aug 13, 2021
Merged
Changes from all commits
Commits
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
52 changes: 26 additions & 26 deletions utilities/backgrounds.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Backgrounds
# 背景 {#backgrounds}

## Background Attachment
## 背景固定 {#background-attachment}

Utilities for controlling how a background image behaves when scrolling.
用于控制背景图片在滚动时表现的工具类。

<PlaygroundWithVariants
variant='fixed'
Expand All @@ -15,9 +15,9 @@ Utilities for controlling how a background image behaves when scrolling.
&gt;&lt;p&gt;The quick brown fox jumps over the lazy dog&lt;/p&gt;&lt;/div&gt;'
/>

## Background Clip
## 背景裁剪 {#background-clip}

Utilities for controlling the bounding box of an element's background.
用于控制元素背景是否裁剪到边框、内边距盒子、内容盒子下的工具类。

<PlaygroundWithVariants
variant='border'
Expand Down Expand Up @@ -45,9 +45,9 @@ Utilities for controlling the bounding box of an element's background.
&lt;/div&gt;"
/>

## Background Color
## 背景颜色 {#background-color}
watonyweng marked this conversation as resolved.
Show resolved Hide resolved

Utilities for controlling an element's background color.
用于控制元素背景色的工具类。

<PlaygroundWithVariants
variant='gray-500'
Expand Down Expand Up @@ -77,9 +77,9 @@ export default {

</Customizing>

## Background Opacity
## 背景颜色不透明度 {#background-opacity}

Utilities for controlling the opacity of an element's background color.
用于控制元素背景色不透明度的工具类。

<PlaygroundWithVariants
variant='50'
Expand Down Expand Up @@ -108,9 +108,9 @@ export default {

</Customizing>

## Background Position
## 背景图像位置 {#background-position}

Utilities for controlling the position of an element's background image.
用于控制元素背景图片位置的工具类。

<PlaygroundWithVariants
variant='bottom'
Expand Down Expand Up @@ -147,9 +147,9 @@ export default {

</Customizing>

## Background Repeat
## 背景图像重复 {#background-repeat}

Utilities for controlling the repetition of an element's background image.
用于控制元素背景图像重复的工具类。

<PlaygroundWithVariants
variant='repeat'
Expand All @@ -162,9 +162,9 @@ Utilities for controlling the repetition of an element's background image.
&lt;/div&gt;'
/>

## Background Size
## 背景图像大小 {#background-size}

Utilities for controlling the background size of an element's background image.
用于控制元素背景图背景大小的工具类。

<PlaygroundWithVariants
variant='auto'
Expand Down Expand Up @@ -195,9 +195,9 @@ export default {

</Customizing>

## Background Origin
## 背景图像原点 {#background-origin}

Utilities for controlling the background origin of an element's background image.
用于控制元素背景图像原点的工具类。

<PlaygroundWithVariants
variant='border'
Expand All @@ -211,9 +211,9 @@ Utilities for controlling the background origin of an element's background image
&lt;/div&gt;'
/>

## Background Image
## 背景图像 {#background-image}

Utilities for controlling an element's background image.
用于控制元素背景图像的工具类。

<PlaygroundWithVariants
variant='gradient-to-r'
Expand Down Expand Up @@ -243,11 +243,11 @@ export default {

</Customizing>

## Background Gradient
## 背景渐变 {#background-gradient}

Utilities for controlling background gradients.
用于控制元素背景渐变的工具类。

### Gradient From
### 渐变起点色 {#gradient-from}

<PlaygroundWithVariants
variant='green-500'
Expand All @@ -259,7 +259,7 @@ Utilities for controlling background gradients.
html="&lt;div class=&quot;h-36 w-36 rounded-md bg-gradient-to-r {class} to-blue-500&quot;&gt;&lt;/div&gt;"
/>

### Gradient Via
### 渐变中间色 {#gradient-via}

<PlaygroundWithVariants
variant='gray-500'
Expand All @@ -271,7 +271,7 @@ Utilities for controlling background gradients.
html="&lt;div class=&quot;h-36 w-36 rounded-md bg-gradient-to-r from-red-500 {class} to-blue-500&quot;&gt;&lt;/div&gt;"
/>

### Gradient To
### 渐变终点色 {#gradient-to}

<PlaygroundWithVariants
variant='yellow-500'
Expand All @@ -283,9 +283,9 @@ Utilities for controlling background gradients.
html="&lt;div class=&quot;h-36 w-36 rounded-md bg-gradient-to-r from-green-500 {class}&quot;&gt;&lt;/div&gt;"
/>

## Background Blend Mode
## 背景混合模式 {#background-blend-mode}

Utilities for controlling how an element's background image should blend with its background color.
用于控制元素背景图像与其背景颜色混合的工具类。

<PlaygroundWithVariants
variant='normal'
Expand Down