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

css3如何設置圖片拉伸

發布時間：2022-08-12 19:34:10

① 請問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如何設置圖片拉伸相關的資料

熱點內容

比耶女孩圖片頭像發布：2024-04-20 07:07:31 瀏覽：899

工業熱風機圖片與價格發布：2024-04-20 06:58:57 瀏覽：575

女生背影圖片背書包發布：2024-04-20 06:44:07 瀏覽：828

男生把女生攬在懷里的圖片發布：2024-04-20 06:43:24 瀏覽：243

萌兔子圖片可愛頭像卡通發布：2024-04-20 06:29:48 瀏覽：632

最瘦小女孩子圖片發布：2024-04-20 06:24:33 瀏覽：780

查男生腹肌圖片發布：2024-04-20 06:12:56 瀏覽：516

自製視頻怎麼分成一張張的圖片發布：2024-04-20 05:58:31 瀏覽：427

生氣文字的圖片發布：2024-04-20 05:38:48 瀏覽：960

小班科學牆面布置圖片簡單大方發布：2024-04-20 05:37:43 瀏覽：959

用黑卡紙刻畫的簡單圖片大全發布：2024-04-20 05:29:39 瀏覽：991

高中男孩發型圖片發布：2024-04-20 05:11:11 瀏覽：790

我的妲己可愛圖片發布：2024-04-19 23:52:01 瀏覽：51

吳尊頭像圖片高清帥氣發布：2024-04-19 23:46:39 瀏覽：163

如何看關於原神的一些圖片發布：2024-04-19 23:42:39 瀏覽：515

真實的美女背影圖片發布：2024-04-19 23:35:14 瀏覽：100

跟閨蜜逛街買衣服的圖片發布：2024-04-19 23:13:07 瀏覽：259

日本動漫房間圖片發布：2024-04-19 23:13:06 瀏覽：740

18女孩發型圖片大全發布：2024-04-19 23:13:02 瀏覽：874

水冰兒動漫高清圖片發布：2024-04-19 22:46:41 瀏覽：712