/
path---2015-background-a31023078a0c104b074d.js
2 lines (2 loc) · 7.37 KB
/
path---2015-background-a31023078a0c104b074d.js
1
2
webpackJsonp([90516172976399],{565:function(n,t){n.exports={data:{site:{siteMetadata:{title:"Step Over",subtitle:"有趣的灵魂终会相遇",copyright:"© All rights reserved.",author:{name:"周骅",rss:"#",email:"zhou--hua@163.com",github:"zhouhua-js"}}},markdownRemark:{id:"/work/playground/zhouhua.site/src/pages/articles/2015/background.md absPath of file >>> MarkdownRemark",html:'<p>CSS3中新增了许多background类的属性。今天就来聊聊<strong>background-clip</strong>和<strong>background-origin</strong>。为什么把它们俩放一起说呢？因为它们俩很“默契”地拥有相同的属性值。</p></p>\n<h2>background-clip</h2>\n<p>先说<strong>background-clip</strong>。</p>\n<pre class="lang:css decode:true" title="语法">background-clip: <border-box|padding-box|content-box|inherit>#</pre>\n<p> 可以看到它有三个属性值：</p>\n<dl>\n<dt><pre class="inline:true decode:1 " >border-box</pre></dt>\n<dd>background能够延伸到边框的外沿（但从Z轴方向上看，会被边框给盖住）。</dd>\n<dt><pre class="inline:true decode:1 " >padding-box</pre></dt>\n<dd>background能够延伸到内边框的外沿。</dd>\n<dt><pre class="inline:true decode:1 " >content-box</pre></dt>\n<dd>background裁剪到内容区域。</dd>\n</dl>\n<p>其实这个属性表现的就是一个盒子模型到底什么区域能显示背景。来看看效果：</p>\n<pre class="lang:css decode:true" title="代码示例">.box{\n height: 100px;\n width: 200px;\n margin: 0 auto;\n padding: 20px;\n border: 20px dotted #222;\n background-image: url(http://zhouhua.qiniudn.com/test.jpg);\n}</pre>\n<div class="box"> </div>\n<p>background-clip:<select id="clips"></p>\n<option value="border-box">border-box</option>\n<option value="padding-box">padding-box</option>\n<option value="content-box">content-box</option>\n</select>\n<p>border-radius:<input id="clipsRadius" style="width: 30px;" type="text" value="0" />px</p>\n<p>通过上面的演示，大家应该能比较直观的了解这个属性的作用。对于这个属性，还有几点想和大家说明一下。</p>\n<p>首先是如果存在</p>\n<pre class="lang:js highlight:0 decode:1 inline:1 " >border-radius</pre>\n<p> 时，</p>\n<pre class="lang:js highlight:0 decode:1 inline:1 " >background-clip</pre>\n<p> 的表现如何？圆角缺失处是否会渲染背景？大家可以试着调节一下圆角半径来体会一下。</p>\n<p>另外一个问题是取多个属性值的问题。MDN和一些CSS3的参考书籍上均指出</p>\n<pre class="lang:js highlight:0 decode:1 inline:1 " >background-clip</pre>\n<p> 可以有多个属性值，大体类似<span style="font-size: 12px; line-height: 19.2000007629395px; background-color: #d2eeca;">font-family</span> ，以逗号分隔。不过我稍微验证了一下，没能发现有什么用。</p>\n<p>最后一个问题是兼容性问题：</p>\n<table>\n<tbody>\n<tr><th>特性</th><th>Chrome</th><th>Firefox (Gecko)</th><th>Internet Explorer</th><th>Opera</th><th>Safari</th></tr>\n<tr>\n<td>基本支持</td>\n<td>1.0</td>\n<td>4.0 (2.0) </td>\n<td>9.0 </td>\n<td>10.5</td>\n<td>3.0 (522) </td>\n</tr>\n<tr>\n<td><pre class="inline:true decode:1 " >content-box</pre></td>\n<td>1.0</td>\n<td>4.0 (2.0) </td>\n<td>9.0 </td>\n<td>12.0 (或更早)</td>\n<td>3.0 (522) </td>\n</tr>\n</tbody>\n</table>\n<p>注：Firefox 3.6之前，支持的取值为padding | border，另外webkit带前缀时，支持border | padding | content这三个替代属性值。</p>\n<p> </p>\n<h2>background-origin</h2>\n<p><strong>background-clip</strong>是描述背景裁切方式的属性，从字面意义上，我想大家也能猜到<strong>background-origin</strong>是描述坐标原点相关的属性。</p>\n<pre class="lang:css decode:true" title="语法">background-origin: <border-box|padding-box|content-box|inherit>#</pre>\n<p> 同样，它有三个属性值：</p>\n<dl>\n<dt><pre class="inline:true decode:1 " >border-box</pre></dt>\n<dd>background以border-box的左上角为起点开始渲染，或者说background-position的起始点为border-box的左上角。</dd>\n<dt><pre class="inline:true decode:1 " >padding-box</pre></dt>\n<dd>background以padding-box的左上角为起点开始渲染，或者说background-position的起始点为padding-box的左上角。</dd>\n<dt><pre class="inline:true decode:1 " >content-box</pre></dt>\n<dd>background以padding-box的左上角为起点开始渲染，或者说background-position的起始点为padding-box的左上角。</dd>\n</dl>\n<p>单看定义可能会有些让人一头雾水，还是通过实践来体会吧：</p>\n<pre class="lang:css decode:true" title="代码示例">.box{\n height: 100px;\n width: 200px;\n margin: 0 auto;\n padding: 20px;\n border: 20px dotted #222;\n background-image: url(http://zhouhua.qiniudn.com/test.jpg);\n}</pre>\n<div class="box"> </div>\n<p>background-clip:<select id="clips2"></p>\n<option value="border-box">border-box</option>\n<option value="padding-box">padding-box</option>\n<option value="content-box">content-box</option>\n</select>\n<p>background-origin:<select id="origins2"></p>\n<option value="border-box">border-box</option>\n<option value="padding-box">padding-box</option>\n<option value="content-box">content-box</option>\n</select>\n<p>border-radius:<input id="clipsRadius2" style="width: 30px;" type="text" value="0" />px</p>\n<p>background-position:<input id="x" style="width: 30px;" type="text" value="0" />px <input id="y" style="width: 30px;" type="text" value="0" />px</p>\n<p>background-attachment:<select id="attachment"></p>\n<option value="fixed">fixed</option>\n<option value="scroll">scroll</option>\n</select>\n<p>多尝试尝试，我想background-origin的作用还是比较容易感受理解的。同时，也注意体会background-position和background-origin属性的联系与区别。另外要提一点就是如果设置了background-attachment为fixed，则background-origin无效。</p>\n<p>MDN上指出</p>\n<pre class="lang:js highlight:0 decode:1 inline:1 " >background-origin</pre>\n<p> 可以有多个属性值，我还是没试出效果。</p>\n<p>最后一个问题是兼容性问题：</p>\n<table>\n<tbody>\n<tr><th>特性</th><th>Chrome</th><th>Firefox (Gecko)</th><th>Internet Explorer</th><th>Opera</th><th>Safari</th></tr>\n<tr>\n<td>基本支持</td>\n<td>1.0</td>\n<td>4.0 (2.0) </td>\n<td>9.0 </td>\n<td>10.5</td>\n<td>3.0 (522) </td>\n</tr>\n<tr>\n<td><pre class="inline:true decode:1 " >content-box</pre></td>\n<td>1.0</td>\n<td>4.0 (2.0) </td>\n<td>9.0 </td>\n<td>不支持</td>\n<td>3.0 (522) </td>\n</tr>\n</tbody>\n</table>\n<p>注：类似于background-clip，Firefox 3.6之前，支持的取值为padding | border，另外webkit带前缀时，支持border | padding | content这三个替代属性值。</p>\n<p> </p>',excerpt:"CSS3中新增了许多background类的属性。今天就来聊聊 background-clip 和 background-origin 。为什么把它们俩放一起说呢？因为它们俩很“默契”地拥有相同的属性值。 background-clip 先说 background-clip…",fields:{tagSlugs:["/tags/background-clip/","/tags/background-origin/","/tags/css/","/tags/css-3/"]},frontmatter:{title:"必会CSS3技能：background-clip/background-origin",tags:["background-clip","background-origin","CSS","css3"],date:"2015-03-03T11:46:54.000Z",description:null}}},pathContext:{slug:"/2015/background/"}}}});
//# sourceMappingURL=path---2015-background-a31023078a0c104b074d.js.map