⑴ css用於控制網頁的背景圖片的屬性正確的是
用css設置網頁中的背景圖片,主要有如下幾個屬性:
1,背景顏色 {">說明:參數取值和顏色屬性一樣注意:在HTML當中,要為某個對象加上背景色只有一種辦法,那就是先做一個表格,在表格中設置完背景色,再把對象放進單元格。這樣做比較麻煩,不但代碼較多,還要為表格的大小和定位傷些腦筋。現在用CSS就可以輕松地直接搞定了,而且對象的范圍很廣,可以是一段文字,也可以只是一個單詞或一個字母。例子:給部分文字加背景顏色給部分文字加背景顏色表格背影顏色:
代碼示例:
style=" margin-left: 0px; padding: 0px; clear: both; line-height: 24px;">
2.背景圖片:background-image
語法:{background-image: url(URL)|none}說明: URL就是背景圖片的存放路徑。如果用「none」來代替背景圖片的存放路徑,將什麼也不顯示。例子:給部分文字加背景圖片
代碼示例:
.imgbgstyle { background-image: url(logo.gif)}
3.背景重復:background-repeat
語法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}作用:背景圖片重復控制的是背景圖片平鋪與否,也就是說,結合背景定位的控制可以在網頁上的某處單獨顯示一幅背景圖片
說明:參數取值范圍:
·inherit 繼承·no-repeat 不重復平鋪背景圖片·repeat·repeat-x 使圖片只在水平方向上平鋪·repeat-y 使圖片只在垂直方向上平鋪
注意:如果不指定背景圖片重復屬性,瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。
4.背景固定:background-attachment
語法:{background-attachment:fixed|scroll}說明:參數取值范圍
·fixed:網頁滾動時,背景圖片相對於瀏覽器的窗口而言,固定不動·scroll:網頁滾動時,背景圖片相對於瀏覽器的窗口而言,一起滾動
注意:背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性,瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過於花哨的背景圖片在滾動時傷害瀏覽者的視力,所以可以解除背景圖片和文字內容的捆綁,該為和瀏覽器窗口捆綁。
例子:使背景圖案不隨文字「滾動」的CSS
代碼示例:
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
5.背景定位:background-position
語法:{background-position:數值|top|bottom|left|right|center}作用:背景定位用於控制背景圖片在網頁中顯示的位置。說明:參數取值范圍
·帶長度單位的數字參數·top:相對前景對象頂對齊·bottom:相對前景對象底對齊·left:相對前景對象左對齊·right:相對前景對象右對齊·center:相對前景對象中心對齊
·比例關系
關鍵字解釋:top left = left top = 0% 0%
⑵ css中設置圖片的屬性有哪些
1)背景圖片插入:background-image:url(位置及名稱); //默認在父級元素內的左上角
2)背景平鋪方式:background-repeat:no-repeat; //不平鋪
3)背景位置:background-position:right bottom; //橫向在右邊,縱向在下邊,即右下角
center center; //位於中心
center right; //中間靠右
100px 200px; //靠左100 靠上200
4)背景尺寸:background-size:cover/contain/100% 100% 等比例縮放(鋪滿即可)/包含在裡面/按盒子大小縮放
注意:低版本的IE不支持背景尺寸
5)背景顯示方式:background-attachment:scroll//隨屏幕滾動 fixed//固定在可視區域,注意:此時的位置是相對於可視區域的
(fixed:這里有一個兼容性性的問題,在IE6中,只有html和body支持這個屬性)
6)在圖片設置邊距時注意IE6的雙倍間距問題:同時有浮動和邊距時產生雙倍間距!
解決方法: display:inline;//變為行內元素即可
⑶ CSS--background系列屬性
css2.1中,顏色的表示方法有三種:(1)單詞;(2)rgb表示法(十進製表示法);(3)十六進製表示法。
能夠用英語單詞來表述的顏色,都是簡單顏色。
紅色:background-color: red;
紅色:background-color:rgb(255,0,0);
rgb(red、green、blue)表示三原色「紅」「綠」「藍」。光學顯示器,每個像素都是由三原色的發光原件組成的,靠明亮度不同調成不同的顏色。
用逗號隔開r,g,b的值,每個值的取值范圍是0~255,一共256個值。
如果此項的值是255,那麼就說明是純色:
綠色:background-color:rgb(0,255,0)
藍色:background-color:rgb(0,0,255)
黑色:background-color:rgb(0,0,0)
白色:background-color:rgb(255,255,255)
顏色可以疊加,比如黃色就是紅色和黃色的疊加:
黃色:background-color:rgb(255,255,0)
紫色:background-color:rgb(255,0,255)
青色:background-color:rgb(0,255,255)
紅色:background-color:#ff0000;
所有用#開頭的值,都是16進制的。
#ff0000(ff表示r,00表示g,00表示b)
16進製表示法和rgb類似,也是兩位兩位的看,但是沒有逗號隔開。
上述紅色表示法中:ff就是10進制的255,00就是十進制的0,所以#ff0000相當於(255,0,0)
十六進制對照表:
任何一種十六進製表示法都能夠換算成rgb表示法。也就是說,兩個表示法能表示的顏色數量一樣多,十六進制能夠簡化成3位,所有#rrggbb的形式,都可以寫成#rgb;
比如,上述的紅色可以寫成background-color:#f00;
但是,如果要採用簡化的方法,必須滿足rrggbb格式才行。
幾個特殊的要記住:
黑:#000
白:#fff
紅:#f00
灰:#333
深灰:#222
淺灰:#ccc
background-image屬性用於給盒子加上背景圖片:
background-image:url(images/1.jpg)
url()表示網址。、
images/1.jpg就是相對路徑。
背景會默認循環,平鋪滿整個盒子,padding的區域也會有背景圖。
background-repeat屬性用來設置背景圖是否重復以及重復方式。
「repeat」表示「重復」。
默認為鋪滿,不用設置。
不重復:background-repeat:no-repeat;
橫向重復:background-repeat:repeat-x;
縱向重復:background-repeat:repeat-y;
background-position:背景定位屬性。
格式:background-position:向右移動量(100px) 向下移動量(200px)
向上向左移只需把移動量改成負數即可。
css精靈又叫「css雪碧」技術,是一種css圖像拼合技術,該方法是將小圖標和圖像合並到一張圖上,然後利用css背景定位來顯示需要顯示的圖片部分。
css精靈的優點,就是減少了http請求。比如4張小圖片,原本需要4個http請求。但是用了css精靈,小圖片變為了一張圖,http請求只有1個了。
background-position:描述左右的詞 描述上下的詞;
比如:background-position:right bottom:(右下角)
background-position:center center;(居中)
背景固定屬性。
格式:background-attachment:fixed;
背景就會被固定住,不會被滾動條滾走。
background屬性和border一樣,是一個綜合屬性:
background:red url(1.jpg) no-repeat 100px 100px fixed;
等價於:
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
可以任意省略部分:
background:red;
⑷ 如何使網頁的背景圖片不隨著滾動條移動 使背景圖片固定(要代碼)
background-attachment
屬性設置背景圖像是否固定或者隨著頁面的其餘部分滾動。
scroll
默認值。背景圖像會隨著頁面其餘部分的滾動而移動。
fixed
當頁面的其餘部分滾動時,背景圖像不會移動。
inherit
規定應該從父元素繼承
background-attachment
屬性的設置。
所以如果要背景圖不隨滾動條滾動就要用:background-attachment:fixed
⑸ 如何使網頁的背景圖片不隨著滾動條移動 使背景圖片固定
background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其餘部分滾動。
scroll 默認值。背景圖像會隨著頁面其餘部分的滾動而移動。
fixed 當頁面的其餘部分滾動時,背景圖像不會移動。
inherit 規定應該從父元素繼承 background-attachment 屬性的設置。
所以如果要背景圖不隨滾動條滾動就要用:background-attachment:fixed
⑹ css中背景的哪個屬性來確定背景圖像是否固定
在確定背景圖像屬性後可以用no-repeat來確定是否重復,然後用top right bottom left來確定背景圖像在容器的哪個地方固定
⑺ Css3——background屬性詳解
background :背景。在css裡面作為css屬性一成員,通過該屬性可設置背景圖片、背景顏色、背景圖片截取等樣式。而僅僅一個background又具有多個子屬性。
顏色名稱,如: background-color:red ;
十六進制背景色,如: background-color:#f00; ;
rgb顏色,這里如果是rgba,a表示透明程度,為0全透明,為1為完全不透明,
如: background-color:rgb(255,0,0.3); ;
特殊值:transparent,透明色: background-color:transparent ;
background-image屬性用於為一個元素設置一個或多個背景圖片,多個背景圖片之間以逗號隔開。
一張圖片: background-image: url(img/a.jpg);
多張圖片: background-image: url(img/a.jpg),url(img/b.jpg);
特殊值:none,不顯示背景圖像
background-image: none;
background-repeat 屬性定義背景圖像的重復方式。背景圖像可以沿著水平軸,垂直軸,兩個軸重復,或者根本不重復。
常用的4個值:
repeat:水平和垂直方向都重復圖像, background-repeat: repeat;
repeat-x:水平方向重復圖像
repeat-y:垂直方向重復圖像
no-repeat:圖像不重復
規定背景圖像是否固定或者隨著頁面的其餘部分滾動。
scroll:背景圖像相對於頁面不動,會隨著網頁的滾動而移動,默認
fixed:背景圖像相對於瀏覽器窗口不動,內容滾動的時候背景圖像不動
background-attachment: fixed;
第一個值為橫坐標,第二個值為縱坐標。默認值為:(0% 0%)。
如果只指定了一個值,該值將用於橫坐標。縱坐標將默認為50%。
例如: background-position: right; 代表背景圖右側,垂直方向居中的位置。
百分比位置,如:background-position: 20% 20%;
具體像素位置, 如:background-position: 20px 20px;
background-size 設置背景圖片大小。圖片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。
單張圖片的背景大小可以使用以下三種方法中的一種來規定:
當通過寬度和高度值來設定尺寸時,你可以提供一或者兩個數值:
每個值可以是<length>, 是 <percentage>, 或者 [auto] 。
示例:
為了設定超過一張以上的圖片尺寸時,需要提供多項數值,它們通過逗號分隔。
CSS部分 背景圖片解析度為427*640
分別給box的background-size屬性添加不同的屬性值,會產生不同的效果。
1、長度 :可以用px、em、rem等指定背景圖片大小,不能為負值。
background-clip 裁剪,通常和background-origin一起使用,決定設置元素的背景(背景圖片或顏色)是否顯示。
註:background-clip只是將背景和背景色粗暴的裁剪。
該屬性有四個值
border-box
背景延伸至邊框外沿(但是在邊框下層)。 background-origin: border-box;
background-origin 規定了指定背景圖片[ background-image ] 屬性的原點位置的背景相對區域.
border-box
背景圖片的擺放以border區域為參考
padding-box
背景圖片的擺放以padding區域為參考
content-box
背景圖片的擺放以content區域為參考
樣式:
先看一下background-origin屬性。
先看一下background-clip屬性。
這就印證了background-clip只是將背景和背景色粗暴的裁剪。
好的,以上就是我對background的各個屬性的理解,實際應用時可能會有部分出入,我們只需要掌握background-color、background-image、background-repeat、background-position、background-size這幾個常用的屬性即可。
歡迎大家一起交流,討論。
⑻ css中background簡寫屬性
在CSS2.1里,background屬性的簡寫方式包含五種屬性值,從CSS3開始,又增加了3個新的屬性值,加起來一共8個。
CSS2.1
background-color使用的背景顏色。
background-image使用的背景圖像。
background-repeat如何重復背景圖像。
background-attachment背景圖像是否固定或者隨著頁面的其餘部分滾動。
background-position背景圖像的位置。
CSS3
background-size背景圖片的尺寸。默認值:'auto' 其他值:像素,百分比,contain,cover
background-origin背景圖片的定位區域。 默認值:'padding-box' 'border-box' 、'content-box'(定義背景圖片繪制的開始點)
background-clip背景的繪制區域。 默認值:'border-box' 還有'padding-box'、'content-box'(定義背景繪制的開始點)
簡寫方式:
background:background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip
不設置的屬性可以省略
background-Origin屬性指定background-position屬性應該是相對位置。
注意
1、如果背景圖像background-attachment是"固定",background-origin屬性沒有任何效果。
2、background-origin 和background-clip很容易混淆,前者是對背景圖片而言,後者是對背景而言。不是一個概念。clip默認值比origin默認值范圍大,所以默認不會有裁剪效果,如果想設置裁剪,可以把origin范圍設置的比clip大就好。比如:origin:'border-box',clip:'padding-box'或者'content-box'.
3、background-size中contain和cover的區別。
cover此時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小。完全覆蓋,可能有圖片顯示不完整的情況。
contain此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。可能有空白區域
如下圖一設置的contain,圖二設置的cover