css 背景background属性

背景颜色与图像

background-color与background-image

• 背景图片总是在背景颜色之上

背景图像重复

background-repeat的属性值:

• repeat-x:水平方向平铺图像,图像可能被截断
• repeat-y:垂直方向平铺图像,图像可能被截断
• repeat:水平和垂直方向同时平铺图像,图像可能被截断
• space:水平或垂直方向同时平铺图像,但在图像与图像之间设置统一间距,确保图像不会被截断
• round:水平或垂直方向同时平铺图像,但调整图像大小,确保图像不被截断
• no-repeat:禁止平铺图像

背景图像的尺寸

background-size属性值:

• 长度值
• 百分数(与图像的宽度高度有关)
  • 预定值:
    • contain:等比例缩放图像,使其宽度、高度中较大者与容器横向或纵向重合，背景图像始终包含在容器内
    • cover:等比例缩放图像,使其宽度、高度中较小者与容器横向或纵向重合，,有可能超出容器
    • auto:默认值,图像以本身尺寸完全显示

背景图像位置

background-position属性:

• 使用像素值:background-position: 1px 1px分别表示上/左边到父元素上/左的距离
• 预定值:
  • top:将背景图像定位到盒子顶部边界
  • left:将背景图像定位到盒子左边界
  • right:将背景图像定位到盒子右边界
  • bottom:将背景图像定位到盒子底部边界
  • center:将背景图像定位到盒子中间位置

设置元素的背景附着方式

为具有视窗的元素应用背景时(有滚动条的),可以指定背景附着内容的方式(比如body textarea)

background-attachment属性值:

• fixed:背景固定到视窗上,内容滚动时背景不动
• local:背景附着到内容上,背景随内容滚动
• scroll:背景固定到元素上,不会随内容滚动

设置背景图像的开始位置与剪裁位置

分别使用:

• background-origin:就是背景的起始点
• background-clip:背景被剪裁的点

如:

div{
    background-origin: border-box;
    background-clip: padding-box;
    /* 背景在边框开始就被铺在元素中,但在内边距开始被裁切,导致 边框-内边距 间空白 */
}

两个属性都用以下属性值:

• border-box
• padding-box
• content-box

盒子阴影

box-shadow:hoffset voffset blur spread color inset:

• hoffset:阴影的水平偏移量(长度值),正右 负左
• voffset:阴影的垂直偏移量(长度值),正下 负上
• blur:(可选)模糊值(长度值),值越大阴影越模糊,默认为0
• spread:(可选)阴影延伸半径(长度值),正值表阴影向盒子各个方向扩大,负值表缩小
• color:(可选)阴影颜色,若省略则看浏览器怎么选
• inset:(可选)将外部阴影设为内部阴影

可以同时声明多个阴影,使用逗号分隔:box-shadow:hoffset voffset blur spread color inset,hoffset voffset blur spread color inset

轮廓

轮廓在边框外围的一圈,它不属于页面,所以不占位

• outline-color:设置轮廓颜色(颜色值)
• outline-offset:设置 轮廓-边框 之间的距离(长度值)
• outline-style:设置轮廓样式(与border-style可选属性值一致)
• outline-width:设置轮廓宽度(thin medium thick或长度值)