位置div在另一個頂部而不是左右流動

Question

在我的主頁上，我有一個用戶可選的圖片幻燈片。我不希望用戶必須修改圖像。

http://homespun-at-heart.com/是一個例子，除了它目前的方式，用戶必須修改圖像。

我想要做的是在圖像頂部放置一個div，使其看起來像內容區域有一個圓角。

如何將我的「圓角」div放在圖像頂部，而不會將圖像推過來？

Answer 1

你可以用div上的css3 border-radius屬性來實現這一點，但它並不支持所有的瀏覽器。對於基於圖像的解決方案，是這樣的：

HTML

<div id="container"> 
    <div id="image"><img src="blah.jpg" /></div> 
    <div id="round"> 
    <img id="topLeftRound" src="leftRound.png" /> 
    <img id="bottomRightRound" src="rightRound.png" /> 
    </div> 
</div> 

CSS

#container{ 
    position:relative 
    } 
    #image{ 
    position:absolute; 
    top:0;left:0; 
    height:100%; 
    z-index:10; 
    } 
    #round{ 
    position:absolute; 
    top:0;left:0; 
    height:100%; 
    z-index:20; 
    } 
    #topLeftRound{ 
     position:absolute; 
     width:10px;height:10px /* or whatever */ 
     top:0;left:0; 
    } 
    #bottomRightRound{ 
     position:absolute; 
     width:10px;height:10px /* or whatever */ 
     bottom:0;right:0; 
} 

我假設你能猜到你希望你的左上和bottomRight形象是什麼......只是該角落的圓角部分。

我想這就是你要找的東西？

Answer 2

您可以簡單地擁有兩個div，一個在另一個裏面，兩個寬度和高度都相同。底部用於實際的照片，即它的背景圖像將是照片。和頂部都設有帶transparancy背景圖像，這僅僅是2個圓角：內

<div id="slideshow"><div id="slideshow_border"></div></div> 

或（甚至更好），你可以有與圖像作爲背景外格，然後兩個div ，一個漂浮在左邊和一個右邊，每個都有一個單獨的透明邊界圖像。這意味着瀏覽您的網站的人將無需下載不必要的額外透明度像素。

<div id="slideshow"> 
<div class="border left"></div> 
<div class="border right"></div> 
</div> 

而CSS：

#slideshow { 
width: 400px; height: 400px; 
background-image: url(images/slideshow1.png); 
} 
#slideshow .border { 
width: 50px; height: 50px; 
} 
#slideshow .border.left { 
float: left; 
background-image: url(images/border-left.gif); 
} 
#slideshow .border.right { 
float: right; 
margin-top: 350px; 
background-image: url(images/border-right.gif); 
} 

我只是用在CSS任意值。

Answer 3

你在你的網站上使用jQuery嗎？如果你這樣做，你可以使用這個插件來生成dom元素的圓角：www.jquery.malsup.com/corner/或者這個：www.dillerdesign.com/experiment/DD_roundies/。兩者都工作得很好，支持包括IE6在內的所有瀏覽器。如果需要檢測IE6，可以使用此插件http://api.jquery.com/jQuery.browser/。

Answer 4

你可以用CSS3的border-radius屬性很容易地做到這一點，你不需要覆蓋div或任何東西。它在IE8及以下版本中不起作用，但可用於Webkit和Firefox。

#slideshow img { 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
}