CSS3學習筆記 背景

2021-08-08 03:56:56 字數 1656 閱讀 1896

背景

background-color:

backgound-image:

backgound-position:

backgound-

背景是固定的

背景是固定的

背景是固定的

背景是固定的

背景是固定的

背景是固定的

背景是固定的

背景是固定的

背景是固定的

背景是固定的

背景是固定的

(1)backgound-clip

.div1

華電軟體學院華電軟體學院華電軟體學院華電軟體學院華電軟體學院

華電軟體學院華電軟體學院華電軟體學院華電軟體學院華電軟體學院

華電軟體學院華電軟體學院華電軟體學院華電軟體學院華電軟體學院

華電軟體學院華電軟體學院華電軟體學院華電軟體學院華電軟體學院

華電軟體學院華電軟體學院華電軟體學院華電軟體學院華電軟體學院

backgound-clip:border-box  背景被裁剪到邊框盒

padding-box  背景被裁剪到內邊距框

content-box  背景被裁剪到內容框

(2)backgound-origin  確定背景的位置

div.div1

.div2

.div3

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

華點軟體學院華點軟體學院華點軟體學院

(3)backgound-size  背景大小

body

原始:css3以前,背景影象大小有影象實際大小決定

css3中可以指定背景,可以重新指定背景大小,畫素或百分比。

伸展背景

它是dog

它是dog

它是dog

它是dog

它是dog

它是dog

background-size: contain 縮小以適合元素(維持畫素長寬比)以較大的縮放比例為準。

background-size: cover 擴充套件元素以填補元素(維持畫素長寬比)以較小的縮放比例為準。。

background-size: 100px 100px; 縮小至指定的大小設定背景高度和寬度。第乙個值設定寬度,第二個值設定的高度。如果只給出乙個值,第二個是設定為"atuo(自動)"。

background-size: 50% 100% 縮小至指定的大小,百分比是相對包含元素的尺寸。

CSS 3學習 box sizing和背景

在css 2中設定元素的width和height僅僅是設定了元素內容區的寬和高,元素實際的尺寸是 margin border padding 內容區。css 3 截止到2016年12月6日該屬性還是草案 中新加了box sizing屬性,用來重新規定設定元素的width和height時,到底包含哪些...

css3 動態背景

動態背景 利用多層背景的交替淡入淡出,實現一種背景在不停變換的效果,先看圖。效果圖 demo位址 步驟 1.利用css的radial gradient建立乙個映象漸變的背景。其中的80 20 為漸變中心的x,y位置。具體的radial gradient用法可以參見這裡 2.重複第一步建立4個擁有不同...

CSS3邊框背景

邊框背景 border image 邊框背景主要是用來給元素邊框新增背景影象,本質是用一張來修飾邊框背景,看下圖效果 用左邊來完成右邊的效果 先看一下邊框背景的引數 border image image boeder width 引數可寫1 4個 填充方式 stretch repeat round ...