043 - 道可道，非常道（下）

不二如是 · 发表于 2020-3-28 12:07:37

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-5-5 08:29 编辑

上一集：042 - 道可道，非常道（上）

哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

本讲继续“死磕”背景图，素材还是用 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>
道可道，非常道，名可名，非常名。
背景图: <img src="img/bc.jpg" width="777px" height="437px">
</body>
</html>

复制代码

后续演示直接在 style 中写，其他基础代码不变，此时背景图默认尺寸 777*437px。

background-size 属性用来指定背景图片大小，auto 值不是自适应，而是按照图像原始尺寸显示。

添加样式：

body {
background: url(img/bc.jpg);
background-size: 77px 43px;
background-repeat: no-repeat;
}

复制代码

手动将背景图的宽高都缩小了 10 倍：

第一个值设置宽度，第二个值设置的高度。

如果只给出一个值，第二个是设置为：

游客，如果您要查看本帖隐藏内容请回复

注意此时是真 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>
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
道可道，非常道，名可名，非常名。
</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。

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：044 - 我们是优雅生活的践行者（上）

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅淘专辑（传送门）（不喜欢更要订阅

）

一个账号 · 发表于 2020-3-28 12:34:12

本帖最后由一个账号于 2020-3-28 12:37 编辑

如果有收获，别忘了评分

：

登录/注册后可看大图

[color=Magenta][size=4]如果[size=7][backcolor=lemonchiffon]有收获[/backcolor][/size]，别忘了[color=RoyalBlue][u][b]评分[/b][/u][/color]{:10_281:} ：[/size][/color]
[align=center][img]http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif[/img][/align]

复制代码

weiter · 发表于 2020-3-28 17:58:41

我爱Web，我爱鱼C

wow，又更新了诶

yushengjiexian · 发表于 2020-3-29 11:42:34

我爱Web，我爱鱼C

liuzhengyuan · 发表于 2020-4-3 10:45:25

我爱Web，我爱鱼C

mo_yy · 发表于 2020-4-12 00:48:00

我爱Web，我爱鱼C

Fire4EVER · 发表于 2020-6-25 16:07:49

我爱Web，我爱鱼C

pym131420 · 发表于 2020-11-10 12:06:00

我爱Web，我爱鱼C

natapon · 发表于 2021-1-18 23:49:05

我爱Web，我爱鱼C

笙歌醉梦 · 发表于 2021-1-20 21:44:52

我爱Web，我爱鱼C

O2H2O · 发表于 2021-7-9 18:02:20

我爱Web，我爱鱼C

心驰神往 · 发表于 2021-8-4 08:00:32

刘彩玲 · 发表于 2021-8-13 18:44:31

我爱Web，我爱鱼C

douTREE · 发表于 2021-9-11 22:32:44

自适应

归林22 · 发表于 2021-10-30 13:37:05

我爱Web，我爱鱼C

laure · 发表于 2022-1-22 10:20:42

我爱Web，我爱鱼C

hornwong · 发表于 2022-1-22 10:46:33

我爱Web，我爱鱼C

c2514710281 · 发表于 2022-10-27 20:06:10

我爱Web，我爱鱼C

小坛砸 · 发表于 2024-4-17 16:24:56

我爱Web，我爱鱼C

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 043 - 道可道，非常道（下）

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

浏览过的版块