當前位置:首頁 » 高清圖片 » css背景圖片縮放
擴展閱讀
女生和渣男搞笑圖片 2023-08-31 22:07:09
嘻嘻長什麼樣圖片 2023-08-31 22:06:10

css背景圖片縮放

發布時間: 2022-02-09 20:33:09

1. css 背景隨頁面 縮放

圖片的縮放功能你可以用zoom來試試,後面更一個屬性值,可以為百分數,也可以為浮點實數。希望對你有幫助,請採納。

可以直接這樣子:zoom:0.75是縮放75%

2. div+css 如何讓背景圖片橫向縮小

不可能。
作為背景的圖片,其長寬尺寸不能控制,只能控制其顯示出來的大小以及位置。

如果擔心載入速度,那就少用圖片,或者盡量壓縮圖片,或者使用小容量的圖片,同時盡量使用平鋪等CSS規則。非有必要不必更換背景圖片。

3. css背景圖片自適應

實現代碼參考:

瀏覽器支持:

Firefox 3.6+ , Chrome 1.0+ , Opera 9.63+, IE9 +

具體寫法

<style>
.container{background-image:url(『』);background-attachment:fixed;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover;}
</style>
<body>
<divclass=」container」>
</div>
</body>

4. css中如何調整插入背景圖片的大小

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

語法:

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

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

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

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

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

(4)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%;

}

5. 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;}

6. background-image背景圖片怎麼用css縮小

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

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

7. div+css怎麼讓背景圖片自動縮放

.imgDiv{

width:500px;

height:500px;

background-image:url('../images/index.jpg');

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

-o-background-size: 100% 100%;

-webkit-background-size: 100% 100%;

background-size: 100% 100%;

-moz-border-image: url(./btn.png) 0;

background-repeat:no-repeat9;

background-image:none9;

(此處空一行)

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index.jpg', sizingMethod='scale')9;

}

(7)css背景圖片縮放擴展閱讀:

css控制背景圖片自動伸縮自適應的小技巧

例子如下:

.picLUp{

background:url(logo.png)no-repeat;

width:100%;height:40%;

background-size:100%100%;

}

語法:

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

屬性:

enabled:

可選項,布爾值(Boolean),設置或檢索濾鏡是否激活。true | false

true:

默認值,濾鏡激活。

false:

濾鏡被禁止。

sizingMethod:

可選項,字元串(String),設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。

8. css背景圖片自適應,怎麼調

用background-size屬性,你想給他多大的百分比都可以,不設置表示默認圖片大小,設置100%表示全屏顯示圖片,按比例縮小或者放大。

這樣就可以實現背景圖片自適應父容器大小而自動變化,達到填充效果。 但是,圖片會被拉伸填充,這並不是我們想要的效果,那麼我們可以不設置100%參數,而是使用cover參數。

設置cover參數以後,背景圖會按比例縮放填充滿整個背景。如果使用IE瀏覽器你會發現,上面的background-size:100% 100%;並沒有起到作用,圖片原本是怎樣就怎樣顯示,比較大就只能顯示一部分。

所以這時需要使用IE特有的濾鏡 AlphaImageLoader 兼容性在IE5.5+以上版本的瀏覽器上都可以完美運行。

1、enabled: 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true|false_ true: 默認值。濾鏡激活。

2、false: 濾鏡被禁止。

3、sizingMethod: 可選項。字元串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。

4、crop: 剪切圖片以適應對象尺寸。

5、image: 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。

6、scale: 縮放圖片以適應對象的尺寸邊界。

7、src: 必選項。字元串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數,濾鏡將不會作用。

特性:

    1、Enabled: 可讀寫。布爾值(Boolean)。參閱 enabled 屬性。

    2、sizingMethod: 可讀寫。字元串(String)。參閱 sizingMethod 屬性。

    3、src: 可讀寫。字元串(String)。參閱 src 屬性。

    說明:

    在對象容器邊界內,在對象的背景和內容之間顯示一張圖片。並提供對此圖片的剪切和改變尺寸的操作。如果載入的是PNG格式,則0%-100%的透明度也被提供。

    PNG格式的圖片的透明度不妨礙你選擇文本。也就是說,你可以選擇顯示在PNG格式的圖片完全透明區域後面的內容。這樣我們就可以完美兼容絕大多數的瀏覽器,實現用CSS讓背景圖片100%填充了。

9. css文件 如何使背景圖片大小適應div的大小

對背景圖片設置屬性:background-size:cover;可以實現背景圖片適應div的大小。
background-size有3個屬性:
auto:當使用該屬性的時候,背景圖片將保持100%
的大小顯示,不進行任何縮放。超過div的多餘部分將被隱藏。當圖片過小時,圖片會自動平鋪。這種屬性通常用來做重復性的背景或者做半透明圖片背景。
cover:當使用該屬性時,圖片將被縮放至恰好能覆蓋div,並且圖片被隱藏的部分最少,這種屬性在大圖背景中應用比較廣泛。這點比較難理解,需要結合實踐理解。
contain:當使用該屬性時,圖片被縮放至最大且能被完全展示出來,但是由於圖片的的尺寸比例與div的尺寸比例會有不同,所以當圖片不能蓋住div時,圖片會自動平鋪。

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

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

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