導航:首頁 > 萬維百科 > 位置調整圖片位子網頁設計

位置調整圖片位子網頁設計

 發布時間：2021-02-03 10:38:07

1、css怎麼調整背景圖片的位置？

1、首先打開前端開發工具，新建一個html代碼頁面。

2、在html代碼頁面上創建一個用於設置背景顏內色的div標簽，然容後給這個標簽添加上class = "bg-img"。

3、設置背景圖片。創建style標簽，然後在標簽裡面對類為bg-img設置背景圖片、圖片不重復、寬、高的樣式。

4、保存html代碼，使用瀏覽器打開，這個時候會發現瀏覽器上的背景圖片顯示在左上角。

5、回到html代碼頁面，在bg-img類里添加background-position: center的屬性。

6、保存html代碼後重新刷新瀏覽器，這個時候會發現瀏覽器上的背景圖片已經自動居中了。

2、css如何控制圖片位置

1、首先我們需要插入一張圖片，並且圖片只出現一次，並設計圖片出現的位置在左上角，可以按照如下代碼來完成：

<html>

<head>

<title>圖片位置設置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:top left;

}


</style>

</head>

<body>

</body>

</html>

可以看到背景圖片出現的位置在瀏覽器的左上角，這個和默認的設置是一樣的。

2、我們需要讓圖片出現在上方的正中間，這里我就用代碼來說明問題，具體詳細代碼如下：

<html>

<head>

<title>圖片位置設置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:top center;

}


</style>

</head>

<body>

</body>

</html>

從下圖的執行結果可以看到，我們的背景圖片出現在了上方的正中間這個位置上了。

3、在上方的中間和左邊都出現了，接下來設置圖片出現在上方的右邊，具體代碼如下所示：

<html>

<head>

<title>圖片位置設置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:top right;

}


</style>

</head>

<body>

</body>

</html>

可以看到如下圖所示的執行效果圖，圖片出現的位置在上方的右邊了。

4、如果需要圖片出現的位置在正中間，我們知道設計網頁的時候背景圖片等等元素一般都是需要放在正中間這個位置上的，這里我就來分析下如何將背景圖片放置在正中間這個位置上，具體代碼如下：

<html>

<head>

<title>圖片位置設置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:center center;

}


</style>

</head>

<body>

</body>

</html>

可以看到如下的執行結果，背景圖片出現在了下方的正中間這個位置上了。

5、設置圖片出現在背景圖片的下方左邊這個位置，下邊用到了bottom這個屬性值來設置的，具體代碼如下：

<html>

<head>

<title>圖片位置設置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:bottom left;

}


</style>

</head>

<body>

</body>

</html>

可以看到如下圖所示的結果，

6、還可以設置背景圖片出現的位置在最下方，可以看到如下代碼：

<html>

<head>

<title>圖片位置設置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:bottom;

}


</style>

</head>

<body>

</body>

</html>

通過如下圖可以看到具體的執行效果，只用一個bottom就能設置圖片出現在最下方這個位置上了。

7、用background-position設置圖片的位置除了使用相對位置還能使用絕對位置來設置，可以設置像素值來確定背景圖片左上角的坐標點來確定，具體代碼如下：

<html>

<head>

<title>圖片位置設置</title>

<style type="text/css">

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:150px 150px;

}


</style>

</head>

<body>

</body>

</html>

從下圖可以看到我們的執行結果，背景圖片出現的位置是150px,150px這個點作為左上角的起始點。

3、HTML 裡面的圖片怎麼移動位置?

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

1、首先，打開html編輯器，新建一個html文件，例如：index.html，填充問題基礎代碼。

2、在index.html中的<img>標簽，輸入html代碼：style="margin: 15px 20px 25px 30px;"。

3、瀏覽器運行index.html頁面，此時圖片被成功移動了位置到距離左側30像素，上方15像素。

4、急急急，求大神，網頁製作插入圖片如何改變位置？

設置下它的CSS樣式吧，水平居左對齊：text-align:left;垂直居頂部對齊：vertical-align：top,這樣就會在左上角了呢

5、網頁設計如何定義圖片的位置和大小

網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計. 網頁的尺寸受限於兩個因素:一個是顯示器屏幕.顯示器現在種類很多,以17寸為主流, 正在朝19寸及寬屏的方向發展.但目前也有為數不少的15寸顯示器.另一個是瀏覽器軟體,就是我們常用的IE,遨遊,Firefox等.
高度：
高度是可以向下延展的,所以一般對高度不限制. 對於一屏來說,一般沒有一個固定值，因為每個人的瀏覽器的工具欄不同，我見過有的瀏覽器工具欄被插件佔了半個屏幕，所以高度沒有確切值。
寬度:
1、在IE6.0下，寬度為顯示器解析度減21，比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。 2、在Firefox下，寬度的分率辨減19。比如1024的寬度-19就變成1005 3、在Opear下，寬度的分率辨減23。比如1024的寬度-23就變成1001 註：Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。
所以如果是1024的解析度，你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點.也方便做一些浮動層的設計.
如果是800的解析度一般都設成770。但也有設成760的.
這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的解析度一般設定760左右,1024的設定990左右.

網頁設計標准尺寸:
1、800*600下，網頁寬度保持在778以內，就不會出現水平滾動條，高度則視版面和內容決定。
2、1024*768下，網頁寬度保持在1002以內，如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。
3、在ps裡面做網頁可以在800*600狀態下顯示全屏，頁面的下方又不會出現滑動條，尺寸為740*560左右
4、在PS里做的圖到了網上就不一樣了，顏色等等方面，因為WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣，所以自然會有失色的現象.
頁面標准按800*600解析度製作，實際尺寸為778*434px 頁面長度原則上不超過3屏，寬度不超過1屏 每個標准頁面為A4幅面大小，即8.5X11英寸
全尺寸banner為468*60px，半尺寸banner為234*60px，小banner為88*31px 另外120*90，120*60也是小圖標的標准尺寸
每個非首頁靜態頁面含圖片位元組不超過60K，全尺寸banner不超過14K
標准網頁廣告尺寸規格
一、120*120，這種廣告規格適用於產品或新聞照片展示。 二、120*60，這種廣告規格主要用於做LOGO使用。 三、120*90，主要應用於產品演示或大型LOGO。 四、125*125，這種規格適於表現照片效果的圖像廣告。 五、234*60，這種規格適用於框架或左右形式主頁的廣告鏈接。

六、392*72，主要用於有較多圖片展示的廣告條，用於頁眉或頁腳。 七、468*60，應用最為廣泛的廣告條尺寸，用於頁眉或頁腳。 八、88*31，主要用於網頁鏈接，或網站小型LOGO。 廣告形式 像素大小 最大尺寸 備注 BUTTON 120*60(必須用gif) 7K 215*50(必須用gif) 7K 通欄 760*100 25K 靜態圖片或減少運動效果 430*50 15K 超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果 巨幅廣告 336*280 35K 585*120 豎邊廣告 130*300 25K 全屏廣告 800*600 40K 必須為靜態圖片，FLASH格式 圖文混排 各頻道不同 15K 彈出窗口 400*300(盡量用gif) 40K BANNER 468*60(盡量用gif) 18K 懸停按鈕 80*80(必須用gif) 7K

流媒體 300*200（可做不規則形狀但尺寸不能超過300*200） 30K 播放時間 小於5秒60幀(1秒/12幀) 網頁中的廣告尺寸 1.首頁右上，尺寸120*60 2.首頁頂部通欄，尺寸468*60 3.首頁頂部通欄，尺寸760*60 4.首頁中部通欄，尺寸580*60 5.內頁頂部通欄，尺寸468*60 6.內頁頂部通欄，尺寸760*60 7.內頁左上，尺寸150*60或300*300 8.下載地址頁面，尺寸560*60或468*60 9.內頁底部通欄，尺寸760*60 10.左漂浮，尺寸80*80或100*10

6、HTML中如何設置插入圖像的位置？

<img src="ad-02.jpg" width="400px"; height="200px"; style="position:absolute; left:100px; top:100px; ">修改left 和top的值。

7、網頁製作中怎麼用CSS樣式定點陣圖片的位置

就簡單的圖片定位是吧，我給你個範例，然後你參考下。 <div style="text-align:center" align="center"> <img src="" align="absmiddle" /> </div> 上面DIV中STYLE里CENTER是圖片居中，ALIGN是表格框架居中，IMG中的ALIGN里的ABSMIDDLE是在表格中居中的圖片絕對居中。 還有什麼不懂的可以聯系我。

8、怎樣調整圖片或FLASH在網頁中顯示的位置，懂網頁設計的進！

用軟體做表格確定位置

與位置調整圖片位子網頁設計相關的知識