这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天。
控制背景平铺
background-repeat属性用于控制图像的平铺行为。
no-repeat— 不重复。repeat-x—水平重复。repeat-y—垂直重复。repeat— 在两个方向重复。
调整背景图像的大小
background-size属性,设置长度或百分比值,调整图像的大小以适应背景。cover浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。在这种情况下,有些图像可能会跳出盒子外contain浏览器将使图像的大小适合盒子内。
背景附加
background-attachment属性控制
scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容,则背景不会移动。实际上,背景被固定在页面的相同位置,所以它会随着页面的滚动而滚动。fixed: 使元素的背景固定在视图端口上,这样当页面或元素内容滚动时,它就不会滚动。它将始终保持在屏幕上相同的位置。local: 这个值是后来添加的 (它只在 Internet Explorer 9+中受支持,而其他的在 IE4+中受支持),因为滚动值相当混乱,在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上,因此当您滚动元素时,背景也随之滚动。 这里有一些规则,需要在简写背景属性时遵循,例如:
使用 background 的简写
使用 background 属性指定的背景。
background-color只能在逗号之后指定。background-size值只能包含在背景位置之后,用'/'字符分隔。
writing-mode
horizontal-tb: 块流向从上至下。对应的文本方向是横向的。vertical-rl: 块流向从右向左。对应的文本方向是纵向的。vertical-lr: 块流向从左向右。对应的文本方向是纵向的。
个人学习总结:巩固了CSS基础知识,加强了记忆。