顏色的應用主要分為前景色、背景色和透明三個部分。 一、前景色 color color前景色 值: <color> | inherit 初始值: 用戶代理特定的值 應用於: 所有元素 繼承性: 有 一般來說,前景是元素的文本,不過前景還包括元素周圍的邊框。有兩種方式直接影響一個元素的前景色,可以使用c ...
顏色的應用主要分為前景色、背景色和透明三個部分。
一、前景色
color
color前景色
值: <color> | inherit
初始值: 用戶代理特定的值
應用於: 所有元素
繼承性: 有
一般來說,前景是元素的文本,不過前景還包括元素周圍的邊框。有兩種方式直接影響一個元素的前景色,可以使用color屬性,也可以使用屬性border-color設置邊框顏色。
二、透明度
opacity
opacity是CSS3中專門用來設置透明度的一個屬性,opacity只能給整個元素設置一個透明度,並且其透明度直接會繼承給其後代元素
值: value | inherit
value:預設值是1,可以取0-1的任意浮點數。其中,1表示完全不透明,0表示完全透明
初始值: 1
應用於: 所有元素
繼承性: 無
opacity: 0.8;
三、背景色
[註意]所有背景屬性都不能繼承
背景顏色
背景色background接受所有合法的顏色,背景顏色不能繼承,其預設值是transparent。
background-color: red;
背景圖像
背景圖像background-image會放在所指定的背景顏色之上,初始值: none
background-image: url("image/1.jpg");
背景平鋪
背景平鋪的屬性值中space和round是CSS3新增的值。space表示背景圖像的兩端對齊平鋪,多出來的空間用空白代替;round也表示背景圖像的兩端對齊平鋪,但多出來的空間通過自身拉伸來填充。
值: repeat | repeat-x | repeat-y | no-repeat | space | round | inherit
background-repeat: repeat;
背景定位
背景定位background-position,初始值: 0% 0%
值: <length> | left | center | right | top | center | bottom
background-position:center ; //圖的中間和元素中間對齊
background-position: 10px 20px; //水平方向10px,垂直方向20px
背景裁切
背景裁切(background-clip)屬性用來定義背景圖像的裁剪區域。
值:background-clip: padding-box || border-box || content-box
在webkit內核下支持text屬性
-webkit-background-clip: text;
background-clip: content-box;
背景尺寸
使用背景尺寸(background-size)屬性可以指定背景圖片的尺寸,可以控制背景圖片在水平和垂直兩個方向的縮放,也可以控製圖片拉伸覆蓋背景區域的方式,甚至還可以截取背景圖片。
background-size: 20px 30px;