Scott

css background 属性详解 a year ago

css
1240个字符
共有145人围观

CSS 背景(background)属性是一个复合属性,它允许我们设定元素的背景颜色、背景图像以及其他相关样式。下面是这个属性的一些常用值:

  • background-color: 指定元素的背景颜色。例如,background-color: red;会将元素的背景设置为红色。
  • background-image: 使用图像作为背景。例如,background-image: url(path/to/image.png);会在元素上显示一张图片。
  • background-repeat: 指定背景图像是否可以重复。可选值有 no-repeat(默认)、repeat、repeat-x、repeat-y。例如,background-repeat: repeat;表示图像会横向和纵向平铺。
  • background-position:指定背景图片的起始位置。可选值有 left top、left center、left bottom、right top、right center、right bottom、center top、center center 以及其他更复杂的值。例如,background-position: right bottom;会将背景图像右下角对齐。
  • background-attachment:指定背景图像是否固定或者滚动。可选值有 fixed(默认)、scroll、local。例如,background-attachment: scroll;表示当用户滚动页面时,背景图像也会滚动。
  • background-size:指定背景图片的尺寸。可以是长度值或者百分比。例如,background-size: 200px auto;将图像宽度设置为 200px,高度自适应内容大小。
  • background-origin:指定背景图片的裁剪位置。可选值有 padding-box(默认)、border-box、content-box。例如,background-origin: content-box;会将背景图像裁剪为内容区域大小。
  • background-clip:指定背景图片是否应用于边框或者内容区域。可选值有 border-box(默认)、padding-box、content-box。例如,background-clip: content-box;会将背景图像限制在内容区域内。
  • background:是上述属性的简写形式。例如,background: red url(path/to/image.png) no-repeat right bottom fixed 200px auto;会同时设置颜色、背景图像、位置和尺寸等多个值。

想要了解更多,请参看: https://developer.mozilla.org/en-US/docs/Web/CSS/background