text.html

 
<p class="zw">到目前为止，我们已经了解了如何将线性渐变和径向渐变充满整个元素，但是如果我们希望渐变铺满整个元素背景，来创造一种新的模式，是不是写几行简单的CSS就可以搞定？好吧，我们可以用重复渐变来做到这一点。</p> 
<p class="zw">重复渐变有<code>repeating-linear-gradient</code>和<code>repeating-radial-gradient</code>这两种类型。这里介绍如何制作线性重复渐变。</p> 
<pre class="代码无行号"><code>div {background-image : repeating-linear-gradient(); }</code></pre> 
<p class="zw">而径向重复渐变的代码如下所示。</p> 
<pre class="代码无行号"><code>div {background-image : repeating-radial-gradient(); }</code></pre> 
<p class="zw">我们从Get Hardboiled网站的调色板上取两个颜色，来写一个线性的重复渐变。如果想让渐变垂直变化，只需要将渐变角度设置为<code>90deg</code>。</p> 
<pre class="代码无行号"><code>div {background-image : repeating-linear-gradient(90deg); }</code></pre> 
<p class="zw">现在把我们取的两个颜色添加到颜色节点，在颜色融合的位置形成锐利的边缘：</p> 
<p class="图"><img alt="10250.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/190.jpg"></p> 
<pre class="代码无行号"><code>div {
background-image : repeating-linear-gradient(
90deg,
#fed46e,
#fed46e 3px,
#ba5c61 3px,
#ba5c61 6px); }</code></pre> 
<p class="zw">最后一个颜色值有个很重要的作用，它有效地控制着用来平铺的渐变背景的尺寸。改变颜色节点的位置比例，就可以看到背景随之发生了有趣的变化。下一个重复渐变密度比较小，并且设置了<code>45deg</code>的倾斜。</p> 
<p class="图"><img alt="10261.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/191.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : repeating-linear-gradient( 
45deg, 
#fed46e, 
#fed46e 5px, 
#ba5c61 5px, 
#ba5c61 10px); }</code></pre> 
<p class="zw">现在我们把渐变设置成<code>-45deg</code>，并放大密度。</p> 
<p class="图"><img alt="10272.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/192.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : repeating-linear-gradient( 
-45deg, 
#fed46e, 
#fed46e 10px, 
#ba5c61 10px, 
#ba5c61 20px); }</code></pre> 
<p class="zw">到目前为止，我们已经了解了线性的重复渐变，但重复渐变还包括圆形或者椭圆形。下一个例子就是一个原点在元素底部中间的圆。</p> 
<p class="图"><img alt="10287.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/193.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : repeating-radial-gradient( 
circle at 50% 100%, 
#fed46e, 
#ba5c61 20px); }</code></pre> 
<p class="zw">最后的颜色节点依然控制着平铺背景的尺寸大小。所以我们增大这个值，并把渐变的原点定位到顶部的中间。</p> 
<p class="图"><img alt="10301.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/194.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : repeating-radial-gradient( 
circle at 50% 0, 
#fed46e, 
#ba5c61 40px); }</code></pre> 
<p class="zw">最后，我们把圆改成<code>ellipse</code>，并把渐变的原点定位到右侧的中间。</p> 
<p class="图"><img alt="10313.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/195.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : repeating-radial-gradient( 
ellipse at 100% 50%, 
#fed46e, 
#ba5c61 40px); }</code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_263">重复渐变实战</h3> 
<p class="zw">让我们带着重复渐变的知识重新回到办公室的那扇门。我们再试一次用线性渐变来实现它。这一次，我们使用重复渐变来代替位图图像。这次我们融合六种颜色，并设置不同的颜色节点来实现更逼真的效果。</p> 
<pre class="代码无行号"><code>.hb-about { 
background-image : 
repeating-linear-gradient( 
90deg, 
#24170b, 
#24170b 6px, 
#291A0b 8px, 
#3e2010 10px, 
#281A11 11px, 
#281A11 12px, 
#25170a 18px, 
#180f06 24px, 
#180f05 24px, 
#180f05 28px); 
}</code></pre> 
<p class="图"><img alt="1641.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/196.jpg"></p> 
<p class="zw">现在的效果就比较专业了。虽说细看起来它并不像真的木头材质，但当用户在小屏手机上看的时候，可能并不会注意到这点。用户能感受到的，就是加载速度更快。但如果是专为大屏设备进行设计，就需要重新引入那张木纹位图背景，用来补充材质细节。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.hb-about { 
background-image : 
radial-gradient( 
circle at bottom left, 
transparent, 
rgba(0,0,0,.8)), 
url(about-wood.jpg); 
background-position : 0 100%, 50% 50%; 
background-repeat : no-repeat, repeat; } 
}</code></pre>