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

AutoCorrect files/zh-cn/web/css/b*/ #5944

Merged
merged 2 commits into from
May 31, 2022
Merged

AutoCorrect files/zh-cn/web/css/b*/ #5944

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2608ad1
AutoCorrect files/zh-cn/web/css/b*/
huacnlee May 31, 2022
ba337f7
Apply suggestions from code review
yin1999 May 31, 2022
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
18 changes: 9 additions & 9 deletions files/zh-cn/web/css/background-attachment/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

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

<p class="hidden">该交互式示例网页的源码存储在GitHub中，如果你想为该网页项目做点贡献的话，请进此链接 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并给我们一个请求加入的回复。</p>
<p class="hidden">该交互式示例网页的源码存储在 GitHub 中，如果你想为该网页项目做点贡献的话，请进此链接 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并给我们一个请求加入的回复。</p>

<h2 id="Syntax" name="Syntax">语法</h2>

Expand All @@ -34,9 +34,9 @@ <h3 id="取值" style="font-size: 1.71428571428571rem;">取值</h3>
<dt><code>fixed</code></dt>
<dd>此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。</dd>
<dt><code>local</code></dt>
<dd>此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。</dd>
<dd>此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。</dd>
<dt><code>scroll</code></dt>
<dd>此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。</dd>
<dd>此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。</dd>
<dt>
<h3 id="标准语法" style="font-size: 1.71428571428571rem;">标准语法</h3>
</dt>
Expand All @@ -48,15 +48,15 @@ <h2 id="例子">例子</h2>

<h3 id="简单的例子">简单的例子</h3>

<h4 id="CSS样式表">CSS样式表</h4>
<h4 id="CSS样式表">CSS 样式表</h4>

<pre class="brush:css; highlight:[3];">p {
background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
background-attachment: fixed;
}
</pre>

<h4 id="HTML源码">HTML源码</h4>
<h4 id="HTML源码">HTML 源码</h4>

<pre class="brush: html">&lt;p&gt;
There were doors all round the hall, but they were all locked; and when
Expand All @@ -73,15 +73,15 @@ <h3 id="多背景图支持">多背景图支持</h3>

<p>此属性支持多张背景图片。你可以用逗号分隔来为每一张背景图片指定不同的<code>&lt;attachment&gt;属性值。</code>每一张背景图片顺序对应相应的 attachment 属性。</p>

<h4 id="CSS样式表_2">CSS样式表</h4>
<h4 id="CSS样式表_2">CSS 样式表</h4>

<pre class="brush:css; highlight:[3];">p {
background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
background-attachment: fixed, scroll;
background-repeat: no-repeat, repeat-y;
}</pre>

<h4 id="HTML源码_2">HTML源码</h4>
<h4 id="HTML源码_2">HTML 源码</h4>

<pre class="brush: html">&lt;p&gt;
There were doors all round the hall, but they were all locked; and when
Expand All @@ -108,7 +108,7 @@ <h2 id="规范" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">规
<table class="standard-table">
<thead>
<tr>
<th scope="col">CSS版本</th>
<th scope="col">CSS 版本</th>
<th scope="col">推荐状态</th>
<th scope="col">点评</th>
</tr>
Expand All @@ -117,7 +117,7 @@ <h2 id="规范" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">规
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>该简单上手的属性已经支持更多的背景图和局部(local)值</td>
<td>该简单上手的属性已经支持更多的背景图和局部 (local) 值</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
Expand Down
4 changes: 2 additions & 2 deletions files/zh-cn/web/css/background-blend-mode/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@

<h2 id="Summary" name="Summary">概述</h2>

<p><code>background-blend-mode</code> CSS属性定义该元素的背景图片，以及背景色如何混合。</p>
<p><code>background-blend-mode</code> CSS 属性定义该元素的背景图片，以及背景色如何混合。</p>

<p>混合模式应该按{{cssxref("background-image")}} CSS属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。</p>
<p>混合模式应该按{{cssxref("background-image")}} CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。</p>

<p>{{cssinfo}}</p>

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/css/background-clip/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

<div>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</div>

<p class="hidden">此交互样例的源代码被储存在GitHub库中.如果你想要对此交互样例工程有代码贡献,请点击 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>并向我们发送拉取请求</p>
<p class="hidden">此交互样例的源代码被储存在 GitHub 库中。如果你想要对此交互样例工程有代码贡献，请点击 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>并向我们发送拉取请求</p>

<p>如果没有设置背景图片（{{cssxref("background-image")}}）或背景颜色（{{cssxref("background-color")}}），那么这个属性只有在边框（ {{cssxref("border")}}）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 {{cssxref("border-style")}} 或 {{cssxref("border-image")}} 有关），否则，本属性产生的样式变化会被边框覆盖。</p>

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/css/background-color/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<h2 id="概览" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">概览</h2>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>属性中的 <strong>background-color </strong>会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>属性中的 <strong>background-color </strong>会设置元素的背景色，属性的值为颜色值或关键字"transparent"二者选其一。</p>

<div>{{cssinfo}}</div>

Expand Down
18 changes: 9 additions & 9 deletions files/zh-cn/web/css/background-image/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@

<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div>

<p class="hidden">此交互实例的代码被存储于Github仓库. 如果你想对这些交互实例贡献代码, 请clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发起拉取请求.</p>
<p class="hidden">此交互实例的代码被存储于 Github 仓库。如果你想对这些交互实例贡献代码，请 clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发起拉取请求。</p>

<p>在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。</p>

<p>然后元素的边框 <a href="/cn/CSS/border">border</a> 会在它们之上被绘制，而 {{cssxref("background-color")}} 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性{{cssxref("background-clip")}} 和 {{cssxref("background-origin")}} 中定义。</p>
<p>然后元素的边框 <a href="/cn/CSS/border">border</a> 会在它们之上被绘制，而 {{cssxref("background-color")}} 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在 CSS 属性{{cssxref("background-clip")}} 和 {{cssxref("background-origin")}} 中定义。</p>

<p>如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 <code>none</code>。</p>

<div class="note"><strong>注意：</strong> 即使图像是不透明的，背景色在通常情况下并不会被显示，web开发者仍然应该指定 {{cssxref("background-color")}} 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。</div>
<div class="note"><strong>注意：</strong> 即使图像是不透明的，背景色在通常情况下并不会被显示，web 开发者仍然应该指定 {{cssxref("background-color")}} 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。</div>

<h2 id="语法">语法</h2>

Expand All @@ -40,7 +40,7 @@ <h3 id="取值">取值</h3>
<dt><code>none</code></dt>
<dd>是一个表示无背景图的关键字。</dd>
<dt><code>&lt;image&gt;</code></dt>
<dd>{{cssxref("&lt;image&gt;")}} 用来标记将要显示的图片. 支持<a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">多背景</a>设置，背景之间以逗号隔开.</dd>
<dd>{{cssxref("&lt;image&gt;")}} 用来标记将要显示的图片。支持<a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">多背景</a>设置，背景之间以逗号隔开。</dd>
</dl>

<h3 id="正规语法">正规语法</h3>
Expand All @@ -49,7 +49,7 @@ <h3 id="正规语法">正规语法</h3>

<h2 id="Examples" name="Examples">示例</h2>

<p>注意星星图片部分透明且位于猫图片上方.</p>
<p>注意星星图片部分透明且位于猫图片上方。</p>

<h4 id="HTML">HTML</h4>

Expand Down Expand Up @@ -134,15 +134,15 @@ <h2 id="浏览器兼容性">浏览器兼容性</h2>

<div>{{Compat("css.properties.background-image")}}</div>

<p>[1] 如果 <code>about:config</code> 中 <code>browser.display.use_document_colors</code>  被设置为 <code>false</code>, 背景图像将不会展示.</p>
<p>[1] 如果 <code>about:config</code> 中 <code>browser.display.use_document_colors</code>  被设置为 <code>false</code>, 背景图像将不会展示。</p>

<p>[2] 当前的iOS Safari 版本 (5.0) CSS 背景属性对SVG的支持并不完善. iOS Safari (5.0)之前的版本亦是如此.</p>
<p>[2] 当前的 iOS Safari 版本 (5.0) CSS 背景属性对 SVG 的支持并不完善。iOS Safari (5.0) 之前的版本亦是如此。</p>

<h2 id="参见">参见</h2>

<ul>
<li><a href="/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites">Implementing image sprites in CSS</a></li>
<li>{{HTMLElement("img")}}</li>
<li>与图像相关的数据类型: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}</li>
<li>与图像相关的函数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}}</li>
<li>与图像相关的数据类型：{{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}</li>
<li>与图像相关的函数：{{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}}</li>
</ul>
16 changes: 8 additions & 8 deletions files/zh-cn/web/css/background-origin/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@

<h2 id="摘要">摘要</h2>

<p> <code>background-origin</code> 规定了指定背景图片{{cssxref("background-image")}} 属性的原点位置的背景相对区域.</p>
<p> <code>background-origin</code> 规定了指定背景图片{{cssxref("background-image")}} 属性的原点位置的背景相对区域。</p>

<p>注意：当使用 {{Cssxref("background-attachment")}} 为fixed时，该属性将被忽略不起作用。</p>
<p>注意：当使用 {{Cssxref("background-attachment")}} 为 fixed 时，该属性将被忽略不起作用。</p>

<div class="note">假如{{cssxref("background")}}简写中没有设置该值，那么在 background 简写值后指定background-origin，那么后面的值就会覆盖简写值，其实说白了，就是后出现的值会覆盖前面的值。</div>
<div class="note">假如{{cssxref("background")}}简写中没有设置该值，那么在 background 简写值后指定 background-origin，那么后面的值就会覆盖简写值，其实说白了，就是后出现的值会覆盖前面的值。</div>

<p>{{cssinfo}}</p>

Expand All @@ -30,11 +30,11 @@ <h3 id="属性值">属性值</h3>

<dl>
<dt><code>border-box</code></dt>
<dd>背景图片的摆放以border区域为参考</dd>
<dd>背景图片的摆放以 border 区域为参考</dd>
<dt><code>padding-box</code></dt>
<dd>背景图片的摆放以padding区域为参考</dd>
<dd>背景图片的摆放以 padding 区域为参考</dd>
<dt><code>content-box</code></dt>
<dd>背景图片的摆放以content区域为参考</dd>
<dd>背景图片的摆放以 content 区域为参考</dd>
<dt>
<h3 id="形式化语法" style="font-size: 1.71428571428571rem;">形式化语法</h3>
<a class="syntaxbox-help icon-only" href="https://developer.mozilla.org/docs/Web/CSS/Value_definition_syntax" lang="en">How to read CSS syntax.</a>
Expand All @@ -50,7 +50,7 @@ <h2 id="例子">例子</h2>
padding: 10px;
background: url('image.jpg');
background-position: center left;
/* 背景将在内容区padding内部填充 */
/* 背景将在内容区 padding 内部填充 */
background-origin: content-box;
}
</pre>
Expand Down Expand Up @@ -95,5 +95,5 @@ <h2 id="浏览器兼容性">浏览器兼容性</h2>
<h2 id="相关文献">相关文献</h2>

<ul>
<li><a href="https://www.cnblogs.com/shytong/p/5077129.html">【CSS3】background-origin和background-clip的区别</a></li>
<li><a href="https://www.cnblogs.com/shytong/p/5077129.html">【CSS3】background-origin 和 background-clip 的区别</a></li>
</ul>
14 changes: 7 additions & 7 deletions files/zh-cn/web/css/background-position-y/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@

<h2 id="摘要">摘要</h2>

<p><strong><code>background-position-y</code></strong> 属性用于设置初始状态时背景图片在垂直方向上的位置,这个位置相对于通过 {{cssxref("background-origin")}} 定义的背景层的原点进行定位. 需要获得更多的信息可以查看{{cssxref("background-position")}} 属性,这个属性已经得到了长久且广泛的支持.</p>
<p><strong><code>background-position-y</code></strong> 属性用于设置初始状态时背景图片在垂直方向上的位置，这个位置相对于通过 {{cssxref("background-origin")}} 定义的背景层的原点进行定位。需要获得更多的信息可以查看{{cssxref("background-position")}} 属性，这个属性已经得到了长久且广泛的支持。</p>

<div class="note"><strong>注意:</strong> <code>background-position-y</code> 设定的值会被 {{cssxref("background")}} 或者是 {{cssxref("background-position")}} 的简写属性的<code>background-position-x</code>后面的值所覆盖.</div>
<div class="note"><strong>注意：</strong> <code>background-position-y</code> 设定的值会被 {{cssxref("background")}} 或者是 {{cssxref("background-position")}} 的简写属性的<code>background-position-x</code>后面的值所覆盖。</div>

<pre class="brush:css no-line-numbers">/* Keyword values */
background-position-y: top;
Expand Down Expand Up @@ -49,15 +49,15 @@ <h3 id="合法值">合法值</h3>

<dl>
<dt><code>top</code></dt>
<dd>将背景图片的上边界与背景位置层的上边界对齐.</dd>
<dd>将背景图片的上边界与背景位置层的上边界对齐。</dd>
<dt><code>center</code></dt>
<dd>将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐.</dd>
<dd>将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐。</dd>
<dt><code>bottom</code></dt>
<dd>将背景图片的下边界与背景位置层的下边界对齐.</dd>
<dd>将背景图片的下边界与背景位置层的下边界对齐。</dd>
<dt><code>&lt;length&gt;</code></dt>
<dd> 通过{{cssxref("&lt;length&gt;")}} 直接设定具体的数值,该数值定义了背景图片垂直方向的上边界相对于当前背景层(content-box/padding-box/border-box)的垂直方向上边界的偏移量,默认情况下是padding-box.</dd>
<dd> 通过{{cssxref("&lt;length&gt;")}} 直接设定具体的数值，该数值定义了背景图片垂直方向的上边界相对于当前背景层 (content-box/padding-box/border-box) 的垂直方向上边界的偏移量，默认情况下是 padding-box.</dd>
<dt><code>&lt;percentage&gt;</code></dt>
<dd>通过{{cssxref("&lt;percentage&gt;")}} 百分比的设置,该百分比定义了背景图片垂直方向的上边界相对于当前背景层(content-box/padding-box/border-box)的垂直方向上边界的偏移百分比,从而得到偏移量,该偏移量的计算方法是:(当前背景层的高-背景图片的高) * 百分比,高度差和百分比都保留符号,例如(100px - 200px) * (-10%) = 10px那么偏移量就是正的10px(向下为正方向),默认情况下是padding-box.</dd>
<dd>通过{{cssxref("&lt;percentage&gt;")}} 百分比的设置，该百分比定义了背景图片垂直方向的上边界相对于当前背景层 (content-box/padding-box/border-box) 的垂直方向上边界的偏移百分比，从而得到偏移量，该偏移量的计算方法是:(当前背景层的高 - 背景图片的高) * 百分比，高度差和百分比都保留符号，例如 (100px - 200px) * (-10%) = 10px 那么偏移量就是正的 10px(向下为正方向),默认情况下是 padding-box.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>
Expand Down
Loading