前端与 CSS3 | 青训营笔记

67 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 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基础知识,加强了记忆。