CSS属性：背景 | 零基础学HTML（二十）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情

• 背景属性之一：background-image

  • 加载范围：默认的加载到边框及以内部分，后期如果图片不重复加载，加载从border以内开始，即设置background-repeat：no-repeat；

  • 属性值：url（图片路径）

  • url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径（/）

  • 背景图片和背景颜色可以一起设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色

• 背景属性之一：background-repeat

  • 作用：设置添加的背景图是否要在盒子汇中重复加载

  • 一定要搭配background-image使用

• 背景属性之一：background-position

  • 作用：主要用于设置不重复的图片在北京区域的加载开始位置

  • 属性值：分为三种写法：单词表示法、像素表示法、百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分隔

  • 第一个属性值：表示背景图片在水平方向的位置

  • 第二个属性值：表示背景图片在垂直方向的位置

  • 单词表示法：

    • 水平方向：left、center、right

    • 垂直方向：top、center、bottom

    • 单词表示图片与盒子背景区域进行对应方向的对齐

  • 像素表示法：

    • 第一个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点水平方向位移的距离

    • 第二个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点垂直方向位移的距离

    • 像素值区分正负，正负代表位移方向不同：正数表示图片针对盒子的原点向右、向下移动；负数表示图片针对盒子的原点向左、向上移动

  • 百分比表示法：100%代表的数值：水平方向上，等价于盒子的border以内的背景区域宽度减去图片的宽度；垂直方向上，等价于盒子的border以内的背景区域高度减去图片的高度

• 背景属性之一：background-attachment

  • 作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动

• 背景属性综合写法background

  • 属性值：可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值可以互换位置