WEB技术

自学CSS技术(二)

yyhouse · 4月24日 · 2019年

CSS 背景

CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
background-color (属性背景颜色)
background-image (属性背景图片)
background-repeat属性值说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repea属性设置应该从父元素继承
background-attachment属性值说明
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
background-position(设置背景图像起始位置的CSS样式属性)

示例说明:设置一个不重复居中的图片背景
body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}

背景颜色

background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
CSS中,颜色值通常以以下方式定义:
十六进制 – 如:”#ff0000″
RGB – 如:”rgb(255,0,0)”
颜色名称 – 如:”red”

body {background-color:#b0c4de;}

背景图像

background-image 属性描述了元素的背景图像.
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

body {background-image:url('paper.gif');}

背景图像 – 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:
当使用简写属性时,属性值的顺序为::
background-color
background-image
background-repeat
background-attachment
background-position

白色背景图片不重复在右上角
body {background:#ffffff url('img_tree.png') no-repeat right top;}
2 条回应
  1. 小白2019-4-24 · 13:24

    菜鸟一个跟着你的文章学习学习。呵呵签到成功!签到时间:2019-04-24 13:22:30,每日打卡,生活更精彩哦~

  2. 梦想2019-4-25 · 22:13

    你这咱评论了,需要刷新才能显示