马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-5-5 08:29 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
本讲继续“死磕”背景图，素材还是用 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>
background-size 属性用来指定背景图片大小，auto 值不是自适应，而是按照图像原始尺寸显示。
添加样式：
body {
background: url(img/bc.jpg);
background-size: 77px 43px;
background-repeat: no-repeat;
}
第一个值设置宽度，第二个值设置的高度。
如果只给出一个值，第二个是设置为：
注意此时是真 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
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-3-28 12:07:37
置顶卡
千斤顶
显身卡
发表于 2020-3-28 12:34:12
wow，又更新了诶
发表于 2020-3-29 11:42:34
我爱Web，我爱鱼C