如何使用css編碼比div大的圖像

我想在我的網站設計中放置比框更大的圖像（查看圖像鏈接），它是我網站設計的一部分。我想用css方法。 iam現在使用dreaweaver，我想編碼這些圖像，請幫助我。如何使用css編碼比div大的圖像

白色BG區域的大小是737×323，（W×H）黃色區域的尺寸爲275×323（W×H），果圖像的大小是690×180。（W×H）

Image link

2011-03-07 Rahul nath

您需要爲此問題提供一些上下文。你說它是「比我的網站上的框更大的圖像......」你網站上的框是什麼樣子的？你能修改它嗎？一種讓可用空間溢出的方法是使用負偏移量，但尚不清楚在我們看到某種上下文之前這是否是一種有效的解決方案。 – jwd 2011-03-07 20:07:19

尊敬的朋友，請參考問題上的圖片鏈接。在該鏈接上，您可以看到主框中有一個白色的bg，黃色的內容框以及比該內容框大的水果圖像。我想將該圖片放在比內容框更大的圖片上。請提供足夠的代碼和解釋，在此先感謝.. – 2011-03-07 20:16:19

啊，所以圖像是你想要的模型。您不想實際使用該圖像。 – jwd 2011-03-07 21:24:54

這裏是應該給你一個起點。主要技巧是使用position:absolute。我建議你read about what that means。從本質上講，它可以讓你指定頁面元素的精確像素座標。

請注意，您在問題中給出的尺寸有點奇怪。例如，您說水果圖片爲690x180。但是當我看到圖像時，看起來水果基本上是正方形的。也許你的形象有很多透明的空間？沒有看到圖像本身並不清楚。

另外，在一個真實的網站上，您可能會希望爲黃色框內的文本本身另外嵌套<div>。

不管怎麼說，這是隻是用彩色矩形的大致佈置的圖像顯示了一個例子：

<html> 
<head> 
<style type='text/css'> 
.back { 
    position:absolute; 
    background-color:gray; 
    width:700px; 
    height:400px; 
    left:0; 
    top:0; 
    text-align:right; /* just to make the text readable in this example */ 
} 

.text { 
    position:absolute; 
    background-color:yellow; 
    width:600px; 
    height:300px; 
    left:50px; 
    top:50px; 
    text-align:right; /* just to make the text readable in this example */ 
} 

.fruit { 
    position:absolute; 
    background-color:red; 
    width:300px; 
    height:380px; 
    left:10; 
    top:10; 
} 
</style> 
</head> 
<body> 
    <div class='back'>the background</div> 
    <div class='text'>the yellow area</div> 
    <div class='fruit'>put the fruit image here</div> 
</body> 
</html>

還有許多其他的方式來做到這一點，當然，這取決於你如何削減了你的圖片。

來源

2011-03-07 21:57:25 jwd

是的！非常非常感謝jw :) – 2011-03-08 09:12:15

對不起:(水果的尺寸真的是262×323，黃色區域的尺寸是720×190，白色的尺寸是775×323，原諒我提供不正確的測量值。被jw和iam的回答清除真的很開心:) – 2011-03-08 09:22:11

如何使用css編碼比div大的圖像

回答

相關問題