043 - 道可道，非常道（下）
本帖最后由 不二如是 于 2020-5-5 08:29 编辑上一集：042 - 道可道，非常道（上）
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
本讲继续“死磕”背景图，素材还是用 42 讲滴。
基础代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FishC</title>
<style>
</style>
</head>
<body>
<p>道可道，非常道，名可名，非常名。</p>
<p>背景图: <img src="img/bc.jpg" width="777px" height="437px"></p>
</body>
</html>
后续演示直接在 style 中写，其他基础代码不变，此时背景图默认尺寸 777*437px。
background-size 属性用来指定背景图片大小，auto 值不是自适应，而是按照图像原始尺寸显示。
添加样式：
body {
background: url(img/bc.jpg);
background-size: 77px 43px;
background-repeat: no-repeat;
}
手动将背景图的宽高都缩小了 10 倍：
第一个值设置宽度，第二个值设置的高度。
如果只给出一个值，第二个是设置为：
**** Hidden Message *****
注意此时是真 auto。
小甲鱼老师多次强调：
这个属性的 % 值，都是占据父元素的百分比，而不是自身哦
这个要记住哈！
剩下每个值得详细演示可以参看速查宝典：传送门。
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
默认 scroll 就是背景图片随着页面滚动而滚动，如果需要不滚动就设置为 fixed。
重点说一下：local，我们需要重新修改下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FishC</title>
<style>
div {
background: url(img/bc.jpg);
width: 200px;
height: 200px;
overflow: scroll;
background-attachment: local;
}
</style>
</head>
<body>
<div>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
<p>道可道，非常道，名可名，非常名。</p>
</div>
</body>
</html>
效果：
对于可以滚动的元素（设置为 overflow:scroll 的元素）,设置 background-attachment:local，则背景会随内容的滚动而滚动。
因为背景图是相对于元素自身内容定位，开始固定。
元素出现滚动条后背景图随内容而滚动。
background-origin 属性指定 background-position 属性应该是相对位置。
一定要记住：如果背景图像 background-attachment 是"固定"，这个属性没有任何效果。
3 个值分别按照不同“区域”进行绘制，很简单，基础操作见速查宝典：传送门
background-clip 属性指定背景绘制区域。
重点还是 3 个值的区别：
[*]border-box，默认值。背景绘制在边框方框内（剪切成边框方框）。
[*]padding-box，背景绘制在衬距方框内（剪切成衬距方框）。
[*]content-box，背景绘制在内容方框内（剪切成内容方框）。
代码演示见速查宝典：传送门
background 是一个简写属性，可以在一个声明中设置这两讲介绍到的所有的背景属性。
这些属性在b ackground 中不必全部设置，比如：
background：#0ff url(xxx.jpg) no-repeat
官方对属性的顺序也没有强制要求。
但是为了方便起见，建议按照如下顺序：
background-color，background-image，background-repeat，background-attachment，background-position，background-size，background-origin，background-clip
另外值得一提的是，如果需要在同时声明 background-position 和 background-size 。
由于其单位可能是相同的，所以要按照 background-position/background-size的 规则进行声明。
比如：
background:50px 50px/50px 50px
如果只需要声明一个，那么这个值是 background-position 。
同理，background-origin 和 background-clip 的取值也是相同的。
在同时设置两个的时候，顺序为 background-origin background-clip，比如：
background:padding-box content-box
声明一个时，这个值是 background-clip。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：044 - 我们是优雅生活的践行者（上）
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ）
本帖最后由 一个账号 于 2020-3-28 12:37 编辑
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
我爱Web，我爱鱼C
{:10_257:}wow，又更新了诶 我爱Web，我爱鱼C 我爱Web，我爱鱼C 我爱Web，我爱鱼C 我爱Web，我爱鱼C 我爱Web，我爱鱼C 我爱Web，我爱鱼C 我爱Web，我爱鱼C 我爱Web，我爱鱼C 我 我爱Web，我爱鱼C 自适应 我爱Web，我爱鱼C 我爱Web，我爱鱼C 我爱Web，我爱鱼C 我爱Web，我爱鱼C {:10_337:}我爱Web，我爱鱼C
页:
[1]