日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSS控制背景圖片秘訣

我們?cè)S許多的裝飾都是用背景圖片來(lái)實(shí)現(xiàn)的，所以CSS控制背景圖片還是非常實(shí)用，于是我研究了一下CSS控制背景圖片透明、絕對(duì)位置等的方法，這里和大家分享一下，希望對(duì)你的學(xué)習(xí)有所幫助。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到沁水網(wǎng)站設(shè)計(jì)與沁水網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋沁水地區(qū)。

CSS控制背景圖片透明、絕對(duì)位置等的方法

網(wǎng)頁(yè)設(shè)計(jì)中處理好了圖片的應(yīng)用，對(duì)網(wǎng)頁(yè)的美觀及網(wǎng)頁(yè)的性能效果來(lái)說(shuō)都是十分關(guān)鍵的。首先我們從背景圖片開始。因?yàn)槲覀冊(cè)S許多的裝飾都是用背景圖片來(lái)實(shí)現(xiàn)的。既然這樣，那么就從CSS控制背景圖片講起吧。

CSS控制背景圖片：

對(duì)于一個(gè)網(wǎng)頁(yè)，我們開始設(shè)計(jì)的時(shí)候，可能沒(méi)有過(guò)多的去想背景圖到底是什么，因?yàn)榇蠖喽际窃O(shè)計(jì)背景色就可以了，原因嗎，我想也很簡(jiǎn)單，因?yàn)樗c前景音樂(lè)一樣，對(duì)于網(wǎng)頁(yè)的打開，速度會(huì)有一定的影響。不過(guò)對(duì)于一般的個(gè)人網(wǎng)站，或者個(gè)人博客而言，它對(duì)展現(xiàn)自己的個(gè)性，當(dāng)然是不可或缺的了，當(dāng)然什么都不會(huì)太過(guò)完美，有好就有壞，也就是當(dāng)圖像不可用但CSS可用的時(shí)候，替換內(nèi)容就不會(huì)顯示出來(lái)，因此，并不建議在導(dǎo)航按鈕文本或類似的情況中使用CSS控制背景圖片。
控制背景圖片的CSS屬性有很多，只要與圖片的相關(guān)的，大多都會(huì)用的上。

(1)、CSS控制背景圖片的導(dǎo)入：

當(dāng)然大家最熟悉的當(dāng)然是background與background-image了。
為網(wǎng)頁(yè)設(shè)計(jì)背景圖片的代碼是：

 
 
 
    
  
  
  
  1. body{background:url("d:\images\04.jpg")}  
    2.   
  
  
  2. 或者  
    3.   
  
  
  3. body{background-image:url("d:\images\04.jpg")}  
    4.

這樣的話，我們就能將想要作背景的圖片導(dǎo)進(jìn)網(wǎng)頁(yè)里了。

(2)、CSS控制背景圖片的顯示方式：

當(dāng)然，只用上面的代碼，是無(wú)法表達(dá)出自己想要的效果的。因?yàn)?，圖片小了，就會(huì)以平鋪的方式，如果是大了，為顯示它，就是會(huì)出現(xiàn)滾動(dòng)條，這樣多不好。因此，我們還得多其進(jìn)行顯示控制，也就是要用到background-repeat，
它是取值：

repeat:默認(rèn)值。背景圖像在縱向和橫向上平鋪

no-repeat:背景圖像不平鋪

repeat-x:背景圖像僅在橫向上平鋪

repeat-y:背景圖像僅在縱向上平鋪

而代碼，我想只要懂一點(diǎn)CSS的都知道，如下：

 
 
 
    
  
  
  
  1. body{background:url("d:\images\04.jpg");  
    2.   
  
  
  2. background-repeat:no-repeat}  
    3.

這樣的話，它就是以原圖像大小顯示了。#p#

(3)、CSS控制背景圖片的大小控制：

不過(guò)問(wèn)題是，倘若圖片過(guò)大了，又怎么辦呢？對(duì)于一個(gè)好網(wǎng)頁(yè)來(lái)說(shuō)，最好不要用太大的圖片，原因上面也說(shuō)過(guò)了，影響打開網(wǎng)頁(yè)的速度。我們最好還是用PS或者FireWorks處理一下。不過(guò)既然我提到了，我們也不防用CSS來(lái)實(shí)現(xiàn)圖片大小的控制。

我想很多人會(huì)自然而然的用上如下代碼：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2. body{background-image:url("d:\images\04.jpg");width:350px;height:350px;}  
    3.   
  
  
  3.  
    4.   
  
  
  4.  
    5.

想法是好的，但你所用的瀏覽器支持嗎？我想IE或者FF一定會(huì)當(dāng)作沒(méi)看見吧。也許你會(huì)問(wèn)，我曾經(jīng)設(shè)計(jì)論壇風(fēng)格時(shí)，是可以實(shí)現(xiàn)的??？我想，如果只是上面的代碼的話，那是不可控制圖片的，因?yàn)樗皇强刂艬ODY的大小。當(dāng)然，這里也是控制不了的。如果是其它的ID標(biāo)記，我想是可以控制記標(biāo)記的范圍大小，呵呵，當(dāng)然也就不是圖像的大小了。
說(shuō)實(shí)話，這個(gè)問(wèn)題不僅困擾著你們，同時(shí)也困擾著我。因?yàn)樗皇且粋€(gè)屬性的值，而不是一個(gè)真正的對(duì)像。

(4)、CSS控制背景圖片的位置控制：

背景圖片，我科是導(dǎo)進(jìn)來(lái)了，但是它的位置真有一點(diǎn)無(wú)法讓人接受。因?yàn)樗J(rèn)的是左上對(duì)齊。但是我們卻不想這樣子放置，那我們又該怎么辦呢。不要著急，激動(dòng)人心的時(shí)刻馬上到來(lái)，現(xiàn)在，讓我們來(lái)認(rèn)識(shí)一下background-position、background-position-x及background-position-y吧。

a.基本語(yǔ)法:

background-position:length||length
background-position:position||position
background-position-x:length|left|center|right
background-position-y:length|top|center|bottom

b.語(yǔ)法取值:

length:百分?jǐn)?shù)|由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。position:top|center|bottom|left|center|right

c.示例：

 
 
 
    
  
  
  
  1. body{background-image:url("d:\images\04.jpg");  
    2.   
  
  
  2. background-position:50%50%;background-repeat:no-repeat;}  
    3.   
  
  
  3. /*設(shè)置雙向坐標(biāo)，這時(shí)相當(dāng)于完全居中*/  
    4.   
  
  
  4. body{background-image:url("d:\images\04.jpg");  
    5.   
  
  
  5. background-position-x:50%;background-repeat:no-repeat;}  
    6.   
  
  
  6. /*設(shè)置雙向坐標(biāo)，這時(shí)相當(dāng)于水平居中*/  
    7.   
  
  
  7. body{background-image:url("d:\images\04.jpg");  
    8.   
  
  
  8. background-position-y:50%;background-repeat:no-repeat;}  
    9.   
  
  
  9. /*設(shè)置縱向坐標(biāo)，這時(shí)相當(dāng)于垂直居中*/  
    10.   
  
  
  10. 對(duì)于取值為length|top|center|bottom我只寫下面三個(gè)例子。  
    11.   
  
  
  11. body{background-image:url("d:\images\04.jpg");  
    12.   
  
  
  12. background-position:topright;background-repeat:no-repeat;}  
    13.   
  
  
  13. /*設(shè)置雙向坐標(biāo)，這時(shí)相當(dāng)于右上*/  
    14.   
  
  
  14. body{background-image:url("d:\images\04.jpg");  
    15.   
  
  
  15. background-position:50%center;background-repeat:no-repeat;}  
    16.   
  
  
  16. /*設(shè)置雙向坐標(biāo)，這時(shí)相當(dāng)于中下*/  
    17.   
  
  
  17. body{background-image:url("d:\images\04.jpg");  
    18.   
  
  
  18. background-position:60pxcenter;background-repeat:no-repeat;}  
    19.   
  
  
  19. /*設(shè)置雙向坐標(biāo)，這時(shí)相當(dāng)于距左60像素下*/  
    20.

說(shuō)了這么多例子，我想你對(duì)于定位，有一定的了解了吧。

(5)、CSS控制背景圖片的透明設(shè)置：

有的時(shí)候，我們總想著去將圖片設(shè)置成透明的。#p#

(6)、多幅背景圖片的設(shè)置：

對(duì)于多幅背景圖片的設(shè)置，我是在《超越CSS：WEB設(shè)計(jì)藝術(shù)精髓》里看到的。目前支持一個(gè)標(biāo)簽內(nèi)有多幅背景圖片的瀏覽器太小了，我知道的也只有AppleSafari。以許你會(huì)問(wèn)，這怎么可能。當(dāng)你看完這個(gè)實(shí)例之后，我想你會(huì)驚訝，“天啊，CSS3之前都只能給每個(gè)元素使用一幅圖片?！比绻胙芯恳幌碌脑挘涂炜彀惭b一個(gè)SAFARI瀏覽器吧。對(duì)我而言，我相信，這是發(fā)展的趨勢(shì)。

代碼如下：

 
 
 
    
  
  
  
  1. body{  
    2.   
  
  
  2. background-image:  
    3.   
  
  
  3. url("d:\mypic\001.png"),  
    4.   
  
  
  4. url("d:\mypic\002.png");  
    5.   
  
  
  5. url("d:\mypic\003.png");  
    6.   
  
  
  6. url("d:\mypic\004.png");  
    7.   
  
  
  7. background-repeat:  
    8.   
  
  
  8. no-repeat,  
    9.   
  
  
  9. no-repeat,  
    10.   
  
  
  10. no-repeat,  
    11.   
  
  
  11. no-repeat,  
    12.   
  
  
  12. repeat-x,  
    13.   
  
  
  13. repeat-y,  
    14.   
  
  
  14. repeat-x,  
    15.   
  
  
  15. repeat-y,  
    16.   
  
  
  16. background-position:  
    17.   
  
  
  17. topleft,  
    18.   
  
  
  18. topright,  
    19.   
  
  
  19. bottomright,  
    20.   
  
  
  20. bottomleft,  
    21.   
  
  
  21. topleft,  
    22.   
  
  
  22. topright,  
    23.   
  
  
  23. bottomright,  
    24.   
  
  
  24. bottomleft;}  
    25.

 詳文參考：http://www.csschina.net/a/jc/css_739_2.html


本文題目：CSS控制背景圖片秘訣
當(dāng)前URL：http://www.5511xx.com/article/cdjddds.html