认识CSS的background（二）

马黑黑 发表于 2024-3-9 17:47

本帖最后由马黑黑于 2024-3-9 17:50 编辑 <style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
#mydiv {
width: 600px;
height: 338px;
border: 1px solid red;
background: tan url('https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg') fixed no-repeat 50% 50% / 100% 100%;
}
</style>

上一讲的示例，我们通过 background 属性给div元素上背景图，代码如下： 
<div class='mum'>
<cl-cd data-idx="1">background: url('https://638183.freep.cn/638183/t24/jpg/dysonstar.jpg');</cl-cd>
</div>
 background 其实是一个简写属性，它可以一次性定义背景颜色、背景图像、背景重复、背景位置、背景大小等等即 background-* 系列属性。上述 background 属性代码，我们设置的 url() 值，它是 background-image，其余的 background-* 采用默认值（缺省时使用默认值）。background 简写属性能简化代码，但要用好简写属性不容易，本节就先来讨论它。 
一般地，CSS简写属性不强制各属性的出现顺序，但由于一些属性的属性值写法一样，所以编写简写属性时各属性值出现的次序还是应当依据大佬们既定约成的习惯写法以及CSS具体的写法规范进行，background 简写属性次序如下： 
<div class='mum'>
<cl-cd data-idx="1">background: 颜色背景图像固定与否重复与否背景位置 / 背景大小;</cl-cd>
<cl-cd data-idx="2"> </cl-cd>
<cl-cd data-idx="3">//举例</cl-cd>
<cl-cd data-idx="4">background: tan url('./grass.png') fixed no-repeat 50% 50% / 100% 100%;</cl-cd>
<cl-cd data-idx="5"> </cl-cd>
<div class="tGreen"><cl-cd data-idx="6">/* 说明</cl-cd>
<cl-cd data-idx="7"> background-attachment - 设置背景图像是否固定或者随着页面的其余部分滚动</cl-cd>
<cl-cd data-idx="8"> scroll 默认值。背景图像会随着页面其余部分的滚动而移动</cl-cd>
<cl-cd data-idx="9"> fixed当页面的其余部分滚动时，背景图像不会移动</cl-cd>
<cl-cd data-idx="10"> </cl-cd>
<cl-cd data-idx="11"> 不是所有的 background-* 属性值都能写入简写属性；使用默认值的属性可以不写</cl-cd>
<cl-cd data-idx="12"> </cl-cd>
<cl-cd data-idx="13"> 由于背景位置与背景大小两个属性值写法一样，所以用 / 分开它们，但注意，使用 / 时</cl-cd>
<cl-cd data-idx="14"> 必须位置大小同时出现，位置在先，大小在后；大小可以省略，省略时 / 不要</cl-cd>
<cl-cd data-idx="15">*/</cl-cd></div>
</div>
 下面介绍 background-* 的具体含义： 
<div class='mum'>
<cl-cd data-idx="1">background-attachment: 设置背景图像是固定的还是与页面的其余部分一起滚动</cl-cd>
<cl-cd data-idx="2">background-clip: 规定背景的绘制区域</cl-cd>
<cl-cd data-idx="3">background-color: 设置元素的背景色</cl-cd>
<cl-cd data-idx="4">background-image: 设置元素的背景图像</cl-cd>
<cl-cd data-idx="5">background-origin: 规定在何处放置背景图像</cl-cd>
<cl-cd data-idx="6">background-position: 设置背景图像的开始位置</cl-cd>
<cl-cd data-idx="7">background-repeat: 设置背景图像是否及如何重复</cl-cd>
<cl-cd data-idx="8">background-size: 规定背景图像的尺寸</cl-cd>
</div>
 以上这些 background-* 属性，都将在后续的讲义里逐一介绍，但不一定按上面的顺序。

千羽发表于 2024-3-9 19:26

吃瓜群众甲来了……{:7_266:}

樵歌发表于 2024-3-9 20:18

吃瓜群众乙来了{:4_189:}

樵歌发表于 2024-3-9 20:19

千羽发表于 2024-3-9 19:26
吃瓜群众甲来了……

你抢了俺的名次{:4_172:}

红影发表于 2024-3-9 21:08

background-attachment - 设置背景图像是否固定或者随着页面的其余部分滚动

其他的都是常用的，这个很少用到呢。

红影发表于 2024-3-9 21:10

background平日都只用来加个图图，这里面要学的东西还真不少呢。
黑黑的讲解很详细，这样的帖子太好了{:4_199:}

红影发表于 2024-3-9 21:12

如果都是分开来写的就不用管顺序了，简写的才会有顺序要求吧。
等着学习下面的内容。黑黑辛苦了{:4_190:}

马黑黑 发表于 2024-3-9 21:42

红影发表于 2024-3-9 21:12
如果都是分开来写的就不用管顺序了，简写的才会有顺序要求吧。
等着学习下面的内容。黑黑辛苦了

或许这个相对简单？

马黑黑 发表于 2024-3-9 21:43

千羽发表于 2024-3-9 19:26
吃瓜群众甲来了……

交通工具挺不错

马黑黑 发表于 2024-3-9 21:44

红影发表于 2024-3-9 21:10
background平日都只用来加个图图，这里面要学的东西还真不少呢。
黑黑的讲解很详细，这样的帖子太好了{:4_ ...

内容还是比较多的，熟悉这些，加背景图片啥的可能会更上手

马黑黑 发表于 2024-3-9 21:45

红影发表于 2024-3-9 21:08
background-attachment - 设置背景图像是否固定或者随着页面的其余部分滚动

其他的都是常用的，这个很少 ...

不少，论坛帖子用得少而已。可能你见过一些文字帖，滚动条翻滚时，上面的内容（文字和插图等）翻滚，背景图不动

马黑黑 发表于 2024-3-9 21:46

樵歌发表于 2024-3-9 20:19
你抢了俺的名次
瓜皮 @千羽留着的，她不吃瓜皮因为她不需要美容

红影发表于 2024-3-9 23:24

马黑黑发表于 2024-3-9 21:42
或许这个相对简单？

不简单呢，很多不会的。

红影发表于 2024-3-9 23:25

马黑黑发表于 2024-3-9 21:44
内容还是比较多的，熟悉这些，加背景图片啥的可能会更上手

是的，虽然有些用过，但没系统学习过，这个帖子真好{:4_199:}

红影发表于 2024-3-9 23:26

马黑黑发表于 2024-3-9 21:45
不少，论坛帖子用得少而已。可能你见过一些文字帖，滚动条翻滚时，上面的内容（文字和插图等）翻滚，背景 ...

嗯嗯，这个功能还是很不错的{:4_187:}

马黑黑 发表于 2024-3-9 23:40

红影发表于 2024-3-9 23:26
嗯嗯，这个功能还是很不错的

很多人喜欢。估计吧，像 @樵歌这样的大文人，也会喜欢的

马黑黑 发表于 2024-3-9 23:41

红影发表于 2024-3-9 23:25
是的，虽然有些用过，但没系统学习过，这个帖子真好

算是复习吧

马黑黑 发表于 2024-3-9 23:41

红影发表于 2024-3-9 23:24
不简单呢，很多不会的。

还是会很多的

红影发表于 2024-3-10 09:54

马黑黑发表于 2024-3-9 23:40
很多人喜欢。估计吧，像 @樵歌这样的大文人，也会喜欢的

更可以烘托文字氛围呢{:4_173:}

红影发表于 2024-3-10 09:55

马黑黑发表于 2024-3-9 23:41
算是复习吧

学而时习之，不亦说乎。{:4_204:}

页: [1] 2

花潮论坛's Archiver

认识CSS的background（二）