CSS3背景設定

2021-09-14 04:20:12 字數 894 閱讀 5381

1.背景尺寸

新增背景

a)控制背景大小

具體數值控制background-size:500px 500px ;

b)百分比控制:background-size:100% 50%;

c) cover會保證完全覆蓋盒子,但不能保證完全顯示,會超出

background-size:cover;(全屏背景自適應比較好實用)

d)contain:包含最大化的比例顯示在盒子中,不保證鋪滿盒子

2.全背景練習

html,body

body

背景原點

控制背景從什麼地方開始顯示

background-origin: border-box;

padding-box:預設值

border-box:從角開始

content-box:內容區域開始

4.背景裁剪

background-clip: content-box;

5.多背景(相簿製作)

.box
6.多背景製作海報

css3設定背景

可以新增一張或者多張 background image url url background position right bottom,left top center 作用分別是將背景放在右邊 底 左 上 居中 background url img1.gif right bottom no rep...

css3 設定背景樣式

1.設定背景顏色 background color red 2.設定背景background image url x 注 3.設定背景平鋪 background repeat no repeat 引數說明 4.設定滾動容器的背景行為 跟隨滾動 固定 background attachment fix...

css3 動態背景

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