當前位置:首頁 » 背景圖片 » 指定背景圖片用css
擴展閱讀
女人臉型簡筆畫圖片 2024-11-02 10:17:39
火影壁紙高清手機圖片 2024-11-02 09:35:01

指定背景圖片用css

發布時間: 2022-03-14 02:50:03

『壹』 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中指定背景圖片中的某一塊區域作為背景

在CSS中指定背景圖片中的某一區域為背景是可以實現的。需要用到background-postion屬性。

如background-position: 50px 100px;

方法示例可參考:
http://www.w3school.com.cn/tiy/t.asp?f=csse_background-position_pixel

『叄』 css中如何調整插入背景圖片的大小

可以通過cover和contain來對圖片進行伸縮。

語法:

background-size:auto;/* 默認值,不改變背景圖片的高度和寬度 */

background-size:100px 50px;/* 第一個值為寬,第二個值為高,當設置一個值時,將其作為圖片寬度來等比縮放 */

background-size:10%;/* 0%~100%之間的任何值,將背景圖片寬高按百分比顯示,當設置一個值的時候同也將其作為圖片寬度來等比縮放 */

background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */

background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */

(3)指定背景圖片用css擴展閱讀:

CSS背景圖片自適應、全屏、填充、拉伸

方法一:js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

</script>

方法二:全瀏覽器兼容

.bg{

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

『肆』 如何使用css樣式,插入背景圖片,在當前頁面中。。css中如何寫,主頁面中又如何寫。謝謝各位!

background:url(圖片路徑) no-repeat(是否允許重復) left (圖片對齊方式) width(寬) height(高)

『伍』 CSS 怎麼樣滾動條指定背景圖片

CSS裡面有專門的屬性,可以更改進度條的,但是只能支持IE內核的瀏覽器。
如果真需要更改的話,需要用JS來控制

『陸』 怎樣設置CSS背景圖片路徑

在CSS文件里,有時要用到background-image,即加一個背景圖片,一般在顯示標題時會經常用到。
現在來看兩個文件目錄:
/css/admin/main.js //js文件的目錄
/css/admin/image/show.gif //圖片的目錄
舉例:
1、現在在main.js文件里要用show.gif來做背景圖片,那麼要這樣來寫:background-image:url(image/td-top-4.gif);
這樣寫路徑是因為main.js和image文件夾都是在css目錄下的。
2、如果現在需要在一個jsp頁面里定義這個圖片路徑,jsp頁面ShowImage.jsp在test文件夾里,而test和css又在同一個目錄下面,這時的圖片路徑就要有所改變了:
background-image:url(../css/admin/image/td-top-4.gif);這樣即可正確的顯示圖片了。
這里的../是指回到上一層目錄,如果是上兩層目錄呢?那就是../../。
當然,如果加上絕對路徑不管怎麼樣都不會出錯了,不過不推薦使用絕對路徑,不利於程序的移植。

『柒』 CSS樣式表控制背景圖片大小

可以通過background-size屬性來設定背景圖片的大小。它可以是像素(px)或者是百分比(%),舉例說明:background-size:950px* 200px這表示把背景圖片大小調整為寬度950像素,高度200像素。

1、background-size的語法說明:

(1)屬性名:background-size

(2)屬性值:其中 bg-size = [|| auto ]{1,2} | cover |
contain

(3)初始值:auto auto

(4)應用於:所有元素

(5)繼承性:無

(6)百分比:後面會說明

(7)計算值:根據指定

2、代碼說明:

/* 一個值: 這個值指定圖片寬度,第二個值為auto */

background-size: auto

background-size: 50%

background-size: 3em

background-size: 12px

/* 兩個值: 第一個值指定圖片的寬度,第二個值指定圖片的高度 */

background-size: 50% auto

background-size: 3em 25%

background-size: auto 6px

background-size: auto auto

/*多重背景,用逗號隔開,在CSS語法中凡語法後跟*或者#,都是可以無限重復的,但必須用逗號隔開。 */

background-size: auto, auto /* 請區別於background-size: auto auto*/

background-size: 50%, 25%, 25%

background-size: 6px, auto, contain

background-size: inherit

(7)指定背景圖片用css擴展閱讀:

背景重復:

如果需要在頁面上對背景圖像進行平鋪,可以使用background-repeat 屬性。

屬性值 repeat 導致圖像在水平垂直方向上都平鋪,就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復,no-repeat 則不允許圖像在任何方向上平鋪。

背景圖像將從一個元素的左上角開始。如下:

body
{
background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y;
}

背景定位:

可以利用background-position 屬性改變圖像在背景中的位置。

下面的例子在 body 元素中將一個背景圖像居中放置:

body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat; background-position:center;
}

為 background-position 屬性提供值有很多方法。首先,可以使用一些關鍵字:top、bottom、left、right 和 center。通常,這些關鍵字會成對出現,不過也不總是這樣。還可以使用長度值,如 100px 或 5cm,最後也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。

『捌』 CSS使用圖片做背景,如何精確定點陣圖片位置

根據你的圖片做了下面的樣式,主要做法是定位,切割圖片,可以使用windows的畫圖工具先定位每個你需要的圖片的位置(在下面的狀態欄有坐標,得到的坐標前面加上一個負號),圖片左上角為x/y對應的0/0, background-image:相對地址指定背景圖像, background-position:指定背景圖像位置, 下面是例子,這個要多練習研究就會了。多看看CSS方面的說明 .icon {background-image: url(back_image.png)} .head {height: 26px; background-position: -42px -222px; background-repeat: no-repeat;} .btn {cursor:pointer; border:0; width: 107px; height: 26px; background-image: url(back_image.png); background-position: -42px -222px; background-repeat: no-repeat;} <div style="width: 107px; height: 200px;" <div class="icon head" style="line-height: 26px; padding-left: 20px;"這是頭部</div 這里是內容!</div</div/<input type="button" class="btn" value="按鈕"

『玖』 css中如何使用背景圖片的某一個位置,

正面這3個控制前景左上角在圖片中的位置
{ background-position : sPosition } 帶1-2個參數,分別表示x ,y軸
{ background-position-x : sPosition } 僅對x軸,即水平方向
{ background-position-y : sPosition } 僅對y軸,即垂直方向
取值可為:
1、數值: 可以是浮點型的絕對單位標識 (cm, mm, in, pt, pc, or px) 或相對值 (em or ex)
2、百分比 相對當前對象的高或寬的整數百分比,如30%
3、對齊
垂直方向對齊:top、center、bottom
水平方向對齊:left、center、right

『拾』 用css怎樣在一個div中設置兩張背景圖片

在一個div裡面設置兩張背景圖片用css3的多背景可以做到,寫法也很容易,類似下面這樣就行了:

background:url(top.jpg) center top no-repeat,
url(bottom.jpg) center bottom no-repeat;

不過因為不同瀏覽器對於CSS3的支持度有限,這種寫法在大多數瀏覽器裡面,特別是IE裡面是無效的。所以通常的作法還是嵌套兩個div,一個div裡面是上面的背景圖,一個div裡面是下面的背景圖,這樣的兼容性會好一些。