【JQuery学习笔记day16】CSS 背景属性

背景属性

Property描述
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-size设置背景图像的大小。
background-origin设置背景图像的定位区域。
background-clip设置背景图像的的绘画区域。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background简写属性,作用是将背景属性设置在一个声明中。

背景颜色

background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
CSS中,颜色值通常以以下方式定义:

  • 十六进制 - 如:"#ff0000"
  • RGB - 如:“rgb(255,0,0)”
  • 颜色名称 - 如:“red”

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

属性值

说明
color指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent指定背景颜色应该是透明的。这是默认
inherit指定背景颜色,应该从父元素继承

背景图像

background-image 属性设置一个元素的背景图像。
元素的背景是元素的总大小,包括填充和边界(但不包括边距)。
默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,可以使用背景色带代替。

属性值

说明
url(‘URL’)图像的URL
none无图像背景会显示。这是默认
linear-gradient()创建一个线性渐变的 “图像”(从上到下)
radial-gradient()用径向渐变创建 “图像”。 (center to edges)
repeating-linear-gradient()创建重复的线性渐变 “图像”。
repeating-radial-gradient()创建重复的径向渐变 “图像”
inherit指定背景图像应该从父元素继承

图像的大小

属性值

说明
length设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)
percentage将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

图像的定位区域

background-Origin属性指定background-position属性应该是相对位置。
注意:如果背景图像background-attachment是"固定",这个属性没有任何效果。

属性值

说明
padding-box背景图像填充框的相对位置
border-box背景图像边界框的相对位置
content-box背景图像的相对位置的内容框

图像的绘画区域

background-clip属性指定背景绘制区域。

属性值

说明
border-box默认值。背景绘制在边框方框内(剪切成边框方框)。
padding-box背景绘制在衬距方框内(剪切成衬距方框)。
content-box背景绘制在内容方框内(剪切成内容方框)。

图像的起始位置

background-position属性设置背景图像位置。如果指定的位置是没有任何背景,图像总是放在元素的左上角。

属性值

说明
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
如果仅指定一个关键字,其他值将会是"center"
x% y%第一个值是水平位置,第二个值是垂直。左上角是0%0%。
右下角是100%100%。如果仅指定了一个值,其他值将是50%。
默认值为:0%0%
xpos ypos第一个值是水平位置,第二个值是垂直。左上角是0
单位可以是像素(0px0px)或任何其他 CSS单位。
如果仅指定了一个值,其他值将是50%。你可以混合使用
%和positions
inherit指定background-position属性设置应该从父元素继承

图像水平或垂直平铺

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

属性值

说明
repeat背景图像将向垂直和水平方向重复。这是默认
repeat-x只有水平位置会重复背景图像
repeat-y只有垂直位置会重复背景图像
no-repeatbackground-image不会重复
inherit指定background-repea属性设置应该从父元素继承

图像滚动

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

属性值

说明
scroll背景图片随着页面的滚动而滚动,这是默认的。
fixed背景图片不会随着页面的滚动而滚动。
local背景图片会随着元素内容的滚动而滚动。
initial设置该属性的默认值。 阅读关于 initial 内容
inherit指定 background-attachment 的设置应该从父元素继承。

简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不太灵光的程序员

有用的话可以请博主喝杯咖啡续命

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值