鱼C论坛

 找回密码
 立即注册
查看: 9737|回复: 24

[学习笔记] 042 - 道可道,非常道(上)

[复制链接]
发表于 2020-3-17 09:23:28 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 不二如是 于 2020-4-9 17:47 编辑






哈哈,废话不多说了,#敲黑板时刻!





在线视频:传送门





课程思维导图

Snip20200317_86.png

猛戳

                               
登录/注册后可看大图
超清





素材包(可不下载,自己准备): bc.zip (249.91 KB, 下载次数: 20, 售价: 2 鱼币)

本讲主要是叫我们如何在页面中加载背景图。

一般都会将 background-color 和 background-image 属性连用:
<!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>
        body {
            background-image: url('img/bc.jpg');
            background-color: #cccccc;
        }
    </style>
</head>

<body>
    <p>道可道,非常道</p>
</body>

</html>
接下里都会直接在 style 中写样式,上面的页面代码保持不变,效果:
Snip20200409_77.png


background-color 属性设置一个元素的背景颜色,往往用来当作“备”景色。

当 background-image 属性加载图像失效后,显示背景色。

不管二者顺序如何,浏览器都会默认用:

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

从上面图中我们看到当页面拉到比背景图尺寸大时,会自动重复覆盖。

如果不需要 repeat,就可以添加属性:
body {
            background-repeat: repeat-y;
        }
此时效果:

Snip20200409_78.png


水平方向的重复就被取消了。

如果想取消默认的重复,可以设置为:
background-repeat: no-repeat;
效果:
Snip20200409_79.png


更多值请参看速查宝典:传送门

background-position 属性设置背景图像的起始位置。

默认情况下,背景图像都是从元素 padding 区域的左上角开始出现的。

但有时我们需要背景能够出现在任何位置

通过 background-position属性,可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。

语法格式为:
background-position: xpos ypos | x% y% | x y
支持 4 个参数值,前两个值用于横坐标,后两个值用于纵坐标。

这意味着我们可以相对于上左下右任意一个角落定位,而不是之前只能相对于左上角定位。可以用长度值、或百分比来指定背景图像的起始位置。

如果只提供一个值,则第二个值为center 。

如果提供两个值,第一个长度或百分比表示水平偏移,第二个长度或百分比表示垂直偏移。

长度或百分比,表示背景图像的左上角相对于背景位置区域左上角的偏移。

下面几个声明给出了背景的起点相对于背景区域左上角的偏移:
background-position: left 10px top 15px;   /* 10px, 15px */ 
background-position:left top;    /*  0px,  0px */ 
background-position:10px 15px;      /* 10px, 15px */ 
background-position:left 15px;    /*  0px, 15px */ 
background-position:10px top;     /* 10px,  0px */ 
background-position:left top 15px;   /*  0px, 15px */ 
background-position:left 10px top;   /* 10px,  0px */

效果:
Snip20200409_82.png





课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


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

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +6 收起 理由
liuzhengyuan + 5 + 5 + 3 鱼C有你更精彩^_^
LuckyTiger66 + 5 + 5 + 3 鱼C有你更精彩^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-17 09:28:45 | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-17 19:57:56 | 显示全部楼层
web开发又出新课程了吗?????
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-26 00:02:03 | 显示全部楼层
辛苦啦 希望继续更新
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-9 22:43:55 From FishC Mobile | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-10 10:34:23 | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-10 10:42:38 | 显示全部楼层
我爱鱼C才怪,我爱Web(真的)
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-11 09:56:30 | 显示全部楼层
Mike_python小 发表于 2020-4-10 10:42
我爱鱼C才怪,我爱Web(真的)

???
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-25 15:44:38 | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-26 08:52:17 From FishC Mobile | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-11-10 11:40:01 | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-18 23:00:55 | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-20 20:51:12 | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-3-5 18:31:27 | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-3-23 23:44:45 From FishC Mobile | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-7-9 15:03:19 | 显示全部楼层
我爱鱼C,我爱Web
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-7-9 15:32:18 | 显示全部楼层
老师,在视频里background-repeat的属性值提到了space,在速查宝典里漏了哦 https://man.ilovefishc.com/pageCSS3/background-repeat.html
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-8-3 17:18:14 | 显示全部楼层
s's's
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-8-12 18:43:27 | 显示全部楼层
想看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-9-11 22:29:24 | 显示全部楼层
background-image
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 09:21

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表