當前位置:首頁 » 背景圖片 » css怎樣換背景圖片大小
擴展閱讀
展廳門面背景圖片 2025-02-13 18:14:35
nba圖片壁紙卡通圖片 2025-02-13 18:12:26
輕軌是什麼樣子的圖片 2025-02-13 18:00:17

css怎樣換背景圖片大小

發布時間: 2023-05-07 13:07:59

❶ css背景圖片怎麼變小

background-size:100% 100%;這是鋪滿整個所在容器,如果你有具體值可以把%換成px;變大變小隨你定的數值而言。當然,你要看更詳細的background屬性可以直接網路background,看一下菜鳥教程或者W3cschool!

❷ CSS或jquery中如何改變background-image的大小

在css中改變background-image的大小可以通過將背景圖片放置的一個div樣式中,然後設置div的樣式屬性來實現。示例核心代碼:

div{

background:url(圖片路徑);

background-size:800px600px;

background-repeat:no-repeat;

}

其中圖片路徑可以使用相對路徑也可以使用絕對路徑,不用添加雙引號。最後一行的background-repeat:no-repeat意思可不允許背景圖片在網頁中平鋪,只能使用一次。

(2)css怎樣換背景圖片大小擴展閱讀:

通過jquery中改變background-image的大小的實例代碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

window.onload=function(){

$('.box').CSS('backgroundSiz','300px 500px')

}

</script>

<style type="text/css">

.box{

background-image: url(1.png);

}

</style>

</head>

<body>

<div class="box">

</div>

</body>

</html>

❸ css怎樣編輯背景圖片的大小

<div style="width:100%; height:100%; background:url(xxxx.jpg) no-repeat center / cover; color:#fff">背景圖布滿整個div框,文字顏色為白色</div>

❹ css問題:如何控制背景圖片的大小

對於圖片,首先我們先想到是背景圖片。因為我們許許多的裝飾都是用背景圖片來實現的。既然這樣,那麼就從CSS控制背景圖片講起吧。
1.CSS控制背景圖片:
對於一個網頁,我們開始設計的時候,可能沒有過多的去想背景圖到底是什麼,因為大多都是設計背景色就可以了,原因嗎,我想也很簡單,因為它與前景音樂一樣,對於網頁的打開,速度會有一定的影響。不過對於一般的個人網站,或者個人博客而言,它對展現自己的個性,當然是不可或缺的了,當然什麼都不會太過完美,有好就有壞,也就是當圖像不可用但CSS可用的時候,替換內容就不會顯示出來,因此,並不建議在導航按鈕文本或類似的情況中使用CSS背景圖片。
控制背景圖片的CSS屬性有很多,只要與圖片的相關的,大多都會用的上。

(1)、背景圖片的導入:
當然大家最熟悉的當然是background與background-image了。
為網頁設計背景圖片的代碼是:
body {background:url("d:\images\04.jpg")}
或者
body {background-image:url("d:\images\04.jpg")}
這樣的話,我們就能將想要作背景的圖片導進網頁里了。

(2)、背景圖片的顯示方式:
當然,只用上面的代碼,是無法表達出自己想要的效果的。因為,圖片小了,就會以平鋪的方式,如果是大了,為顯示它,就是會出現滾動條,這樣多不好。因此,我們還得多其進行顯示控制,也就是要用到background-repeat,
它是取值:
repeat : 默認值。背景圖像在縱向和橫向上平鋪
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像僅在橫向上平鋪
repeat-y : 背景圖像僅在縱向上平鋪
而代碼,我想只要懂一點CSS的都知道,如下:
body {background:url("d:\images\04.jpg");background-repeat:no-repeat}
這樣的話,它就是以原圖像大小顯示了。

(3)、背景圖片的大小控制:
不過問題是,倘若圖片過大了,又怎麼辦呢?對於一個好網頁來說,最好不要用太大的圖片,原因上面也說過了,影響打開網頁的速度。我們最好還是用PS或者FireWorks處理一下。不過既然我提到了,我們也不防用CSS來實現圖片大小的控制。
我想很多人會自然而然的用上如下代碼:

呵呵,想法是好的,但你所用的瀏覽器支持嗎?我想IE或者FF一定會當作沒看見吧。也許你會問,我曾經設計論壇風格時,是可以實現的啊?我想,如果只是上面的代碼的話,那是不可控制圖片的,因為它只是控制BODY的大小。當然,這里也是控制不了的。如果是其它的ID標記,我想是可以控制記標記的范圍大小,呵呵,當然也就不是圖像的大小了。
說實話,這個問題不僅困擾著你們,同時也困擾著我。因為它只是一個屬性的值,而不是一個真正的對像。呵想到了用CSS控制的話,記得告訴我哦。

補充:W3C於9月10發布了一篇名為《CSS Backgrounds and Borders Mole Level 3》的應文章,裡面為CSS的背景加上了幾個我們從未見的屬性:
background-clip :
background-origin :
background-size :背景尺寸。
background-break :
雖然是有了這些屬性,不過現在還沒有支持它們的瀏覽器。真是好苦惱啊。

(4)、背景圖片的位置控制:
背景圖片,我科是導進來了,但是它的位置真有一點無法讓人接受。因為它默認的是左上對齊。但是我們卻不想這樣子放置,那我們又該怎麼辦呢。不要著急,激動人心的時刻馬上到來,現在,讓我們來認識一下background-position、background-position-x及background-position-y吧。
a.基本語法:
background-position : length || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top | center | bottom

b.語法取值:
length :百分數 | 由浮點數字和單位標識符組成的長度值。
position : top | center | bottom | left | center | right

c.示例:
body { background-image: url("d:\images\04.jpg"); background-position: 50% 50%; background-repeat:no-repeat; } /*設置雙向坐標,這時相當於完全居中*/
body { background-image: url("d:\images\04.jpg"); background-position-x: 50%; background-repeat:no-repeat; } /*設置雙向坐標,這時相當於水平居中*/
body { background-image: url("d:\images\04.jpg"); background-position-y: 50%; background-repeat:no-repeat; } /*設置縱向坐標,這時相當於垂直居中*/
對於取值為length | top | center | bottom我只寫下面三個例子。
body { background-image: url("d:\images\04.jpg"); background-position: top right; background-repeat:no-repeat; } /*設置雙向坐標,這時相當於右上*/
body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-repeat:no-repeat; } /*設置雙向坐標,這時相當於中下*/
body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-repeat:no-repeat; } /*設置雙向坐標,這時相當於距左60像素下*/
說了這么多例子,我想你對於定位,有一定的了解了吧。

(5)、背景圖片的透明設置:
有的時候,我們總想著去將圖片設置成透明的。

(6)、多幅背景圖片的設置:
對於多幅背景圖片的設置,我是在《超越CSS:WEB設計藝術精髓》里看到的。不過,卻又讓我很遺憾,因為,目前支持一個標簽內有多幅背景圖片的瀏覽器太小了,我知道的也只有Apple Safari 。以許你會問,這怎麼可能。當你看完這個實例之後,我想你會驚訝,「天啊,CSS3之前都只能給每個元素使用一幅圖片。」如果想研究一下的話,就快快安裝一個SAFARI瀏覽器吧。對我而言,我相信,這是發展的趨勢。總之一句話,誰解釋CSS能力越強,它就將是發展的潮流,誰俱有完美的WEB准標,誰就是明日瀏覽器之星。
代碼如下:
body {
background-image:
url("d:\mypic\001.png"),
url("d:\mypic\002.png");
url("d:\mypic\003.png");
url("d:\mypic\004.png");
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x,
repeat-y,
repeat-x,
repeat-y,
background-position:
top left,
top right,
bottom right,
bottom left,
top left,
top right,
bottom right,
bottom left;}

❺ 我在網頁中插入了背景圖片,怎樣調整背景圖片的大小

可以使用css的background-size屬性來調整背景圖片的大小,比如:
background-size: 240px 180px
背景圖片的寬為240像素,高為180像素
background-size: 50% 30%
背景圖片的寬設為容器寬度的50%,高設為容器高度的30%
background-size: cover
把背景圖片擴展至足夠大,以使背景圖片完全覆蓋容器區域(背景圖片的某些部分也許無法顯示在容器區域中)
background-size: contain
把背景圖片擴展至最大尺寸,以使其寬度和高度完全適應容器區域(容器的部分邊角位置可能會留空)
需要注意的是,background-size是css3的屬性,瀏覽器必須支持css3才能看到預期的效果。好在現在的主流瀏覽器都是支持css3的(如果你堅持用IE6那當我沒說)

❻ css中的背景圖怎麼改變大小

在css中控制插入背景圖片的大小用background-size

background-size使用語法有下面四種情況

background-size: length|percentage|cover|contain

length用法:

background-size:100px; //背景圖片顯示的寬和高為100像素

background-size:100px 160px;//背景圖片顯示的寬為100像素,高為600像素

percentage用法:

background-size:60%; //背景圖片的顯示寬度和高度是圖片大小60%;

background-size:60% 80%; // 背景圖片的顯示寬度是圖片大小的60%,高度是80%;

cover用法:

background-size:cover; //把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。

contain用法:

background-size:contain; //把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。

(6)css怎樣換背景圖片大小擴展閱讀

background-size屬性瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

參考資料

網路——background(計算機專業術語)

❼ css中的背景圖怎麼改變大小

需要准備的材料分別有:電腦、瀏覽器、html編輯器。

1、首先,打開html編輯器,新建html文件,例如:index.html。