您的位置:首页 > Web前端 > CSS

前端学习笔记(4)之css背景属性合集

2020-07-23 20:18 513 查看

背景模块

背景颜色background-color

默认情况下背景颜色会延伸到border的区域,把border设置成点状可观察。

背景图:background-image:url();

容器>背景图 : 背景图平铺,直到铺满,显示多张背景图
容器=背景图 : 只显示一张
容器<背景图 : 只显示背景图的一部分

背景图平铺状态:background-repeat:;

no-repeat 只铺一张背景图
repeat-x 横向平铺
repeat-y 纵向平铺
repeat 双方向直到铺满

背景图的位置:background-position:;

用来设置背景图片的位置。容器内就相当于九宫格内选择位置。
设置方式:
通过top left right bottom center 几个表示方位的词来设置背景。至少两个值。如果只写一个值,第二值默认是center。

background-position:center center; 表示九宫格中间。
background-position:bottom right 表示九宫格右下角

也可以通过像素来设置:
background-position:10px 100px ;(水平方向偏移量 垂直方向偏移量)
把左上角当做原点,上边框是x轴,左边框是y轴。(一般用到负值更多)

背景图大小background-size

background-size 设置图片的尺寸
可选值:
width height 如果只写一个 第二个值默认auto。
cover 图片比例不变,将元素铺满
contain 图片比例不变,让图片在元素中完整显示

背景图的固定background-attachment

  • 设置背景图片是否跟随元素移动
  • 可选值:
    scroll 默认值,背景图片会跟随元素移动
    fixed 背景会固定在页面中,不会随元素移动

背景的简写属性background

示例:
background: red url() no-repeat left center;

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: