背景样式.md

默认情况下,背景区域覆盖的范围是元素内容 + 内边距 + 边框。

基础属性

background-color

background-color 属性用于设置元素的背景颜色。

  • transparent 透明背景
  • 颜色值

注意 半透明浮层的背景颜色建议使用 rgba() 而不是 opacity 设置透明度。

background-image

background-image 属性用于给元素设置一张或多张背景图。

.content {
  background-image: url(../images/bg.png);
}
.header {
  background-image: linear-gradient(#ddd, #fff); /* 渐变背景 */
}
.icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR......GRiIvPjwvZz48L3N2Zz4=);
}

background-repeat

background-repeat 属性用于控制背景图片的重复方式。

  • no-repeat 不重复
  • repeat-x 水平方向重复
  • repeat-y 垂直方向重复

background-position

background-position 属性用于设置背景图的位置。

CSS Sprites(CSS 精灵 | 雪碧图)

CSS Sprites 是指将多张图片(一般是小图标)合成一张大图,不同元素共用这张大图作为背景图,并给这些的元素设置相应的 background-position 值,在达到预期显示效果的同时,减少 HTTP 请求数的一种前端优化手法。

background

background 属性是背景相关属性的缩写。

.avatar {
  background: #fff url(avatar.svg) no-repeat left center;
}

多重背景

进阶属性

background-size

CSS3 background-size 属性用于设定背景图片的大小。IE9 以下不支持

  • cover 缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。
  • contain 缩放背景图片以完全装入背景区,可能背景区部分空白。
  • 100% 等数值
    .logo {
    background-size: 200px 60px;
    }
    

background-clip

CSS3 background-clip 属性用于设置元素背景区域覆盖的范围。

  • border-box 覆盖至边框的最外围
  • padding-box 覆盖至内边距的最外围
  • content-box 仅覆盖元素内容区域

参考链接

results matching ""

    No results matching ""