css3如何設置圖片拉伸_css中如何調整插入背景圖片的大小

① 請問CSS可以實現背景圖片拉伸嗎 (即把瀏覽器放大或縮小後都是顯示一個完整的不重復的圖片)

單獨CSS的話不能實現，需要用到js腳本，給你一個實例好了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>
</head>
<body>
<div class="content-width">
<p><img src="/down/js/images/12567247980.jpg"/></p>
<p><img src="/down/js/images/12567247981.jpg"/></p>
</div>
</body>

</html>

② 請問在CSS中單元格背景圖片自動拉伸填充

在頁面屬性中背景圖片下的重復下拉框中選擇向X軸擴展或者在 div.css 中 #box{width:height:background:圖片地址 repeat-x;}

③ css3 背景圖y軸拉伸，x軸重復怎樣做到

background-size設置Y軸拉伸
repeat-x設置x軸重復

④ 在css中設置圖片的背景圖，怎麼設置圖片縱向拉伸

css中設置背景圖拉伸填充，在css2.1之前這個背景的長寬值是不能被修改的。
實際的結果是只能重復顯示，可以使用repeat,repeat-x,repeat-y,no-repeat這些屬性來控制背景圖片的顯示。所以一般用作背景圖片的有2類：
1.是一整張大圖，尺寸和區域大小剛好吻合
2.一個很小的條狀圖，通過repeat後，形成一個很規則的大圖背景。
css3出現以後，可以用background-size
屬性來實現背景圖拉伸填充。
而且這個屬性在firefox，chrome，以及ie9上都可以使用。
具體使用方法如下：
背景圖尺寸（數值表示方式）：
#background-size{
background-size:200px
100px;
}
背景圖尺寸（百分比表示方式）：
#background-size{
background-size:30%
60%;
}
背景圖尺寸（等比擴展圖片來填滿元素，即cover值）：
#background-size{background-size:cover;
}
背景圖尺寸（等比縮小圖片來適應元素的尺寸，即contain值）：
#background-size{
background-size:contain;
}
背景圖尺寸（以圖片自身大小來填充元素，即auto值）：
#background-size{
background-size:auto;
}

⑤ 怎樣在css中改變圖片格式和形狀

圖片格式代表的是一種資源類型，css是用來修飾網頁展現的

css可以通過對控制對圖片的寬高或者外層容器的寬高來改變圖片大小或者顯示部分
在css3中圖片是可以修飾容器邊框的，這也是改變圖片的一種形式
圖片可以作為容器背景，控制背景的顯示方式來改變圖片的形狀拉伸、收縮、平鋪等
css3中引入了2d、3d轉換動畫也是圖片形狀改變的一種展現
當然更多的形狀變化方式題主可以參考css手冊進行以上基礎的進一步擴展

⑥ DIV+CSS，怎樣將背景圖片拉伸到全屏！！謝謝各位了急呀~~~

拉伸是可以做的,需要用到另外一個屬性:
css中設置背景圖拉伸填充，在css2.1之前這個背景的長寬值是不能被修改的。實際的結果是只能重復顯示，可以使用repeat,repeat-x,repeat-y,no-repeat這些屬性來控制背景圖片的顯示。所以一般用作背景圖片的有2類：
1.是一整張大圖，尺寸和區域大小剛好吻合
2.一個很小的條狀圖，通過repeat後，形成一個很規則的大圖背景。
css3出現以後，可以用background-size 屬性來實現背景圖拉伸填充。而且這個屬性在firefox，chrome，以及ie9上都可以使用。
具體使用方法如下：
背景圖尺寸（數值表示方式）：
#background-size{ background-size:200px 100px; }
背景圖尺寸（百分比表示方式）：
#background-size{ background-size:30% 60%; }
背景圖尺寸（等比擴展圖片來填滿元素，即cover值）：
#background-size{background-size:cover; }
背景圖尺寸（等比縮小圖片來適應元素的尺寸，即contain值）：
#background-size{ background-size:contain; }
背景圖尺寸（以圖片自身大小來填充元素，即auto值）：
#background-size{ background-size:auto; }

⑦ css讓背景圖片拉伸填充的屬性

比如一個容器(body,div,span)中設定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。
所以實際的結果是只能重復顯示，所以出現了repeat,repeat-x,repeat-y,no-repeat這些屬性。就是用來
控制背景圖片的顯示的。所以一般用作背景圖片的有2類：
1.是一整張大圖，尺寸和區域大小剛好吻合
2.一個很小的條狀圖，通過repeat後，形成一個很規則的大圖背景。
但是css3出現以後，這個情況被改善了。background-size
屬性可以讓我們之前的希望成真。
而且這個屬性在firefox，chrome，以及ie9上都可以使用。
具體使用方法如下：
背景圖尺寸(數值表示方式)：
#background-size{
background-size:200px
100px;
}背景圖尺寸(百分比表示方式)：
#background-size2{
background-size:30%
60%;
}背景圖尺寸(等比擴展圖片來填滿元素，即cover值)：
#background-size3{
background-size:cover;
}背景圖尺寸(等比縮小圖片來適應元素的尺寸，即contain值)：
#background-size4{
background-size:contain;
}背景圖尺寸(以圖片自身大小來填充元素，即auto值)：
#background-size5{
background-size:auto;
}

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

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

語法：

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

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

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

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

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

(8)css3如何設置圖片拉伸擴展閱讀：

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

方法一：js控制

</div>

$(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怎麼定義詳情如下

用背景圖無法拉伸。

可以用圖片，然後用定位把它放到內容的下一層。

<styletype="text/css">
.a{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;}
.b{position:absolute;left:0;top:0;background:#CCC;z-index:99;}
</style>
<body>
<imgsrc="bg.jpg"width="100%"height="100%"class="a"/>
<divclass="b">這里放內容</div>

導航:首頁 > 圖片大全 > css3如何設置圖片拉伸

css3如何設置圖片拉伸

(8)css3如何設置圖片拉伸擴展閱讀：

與css3如何設置圖片拉伸相關的資料