圖片是重疊的邊框，不知道我是否正確地做它

我剛開始做HTML/CSS，所以請糾正我，如果我在我的代碼中犯了任何巨大的錯誤。圖片是重疊的邊框，不知道我是否正確地做它

問題是這張圖片上所看到（很抱歉的一些黑盒子，那只是用來掩飾某些內容，在這一點是問題的頂部只有圖像）

http://i.imgur.com/XlaCi.png

您可以看到圖片與邊框重疊。所以我想知道是否有任何方法來解決這個問題，或者我必須編輯圖片以適應我的邊界角落？

Here is the code

我已經做了整個互聯網的一些研究，關於它的東西與我的立場絕對或/也許相對我可能有一個想法？但我不確定，所以我希望你們可以幫我沿

來源

2012-11-12 Ayey

嘗試在包含圓角的包裝上添加'overflow：hidden;'。 – kingkode

@McMastermind這仍然沒有工作。（Google-Chrome） – Ayey

嘗試給「標題」相同的邊界半徑頂部作爲你的包裝元素和添加溢出：隱藏。我認爲這可能有效。

#header { 
-webkit-border-top-left-radius: 50px; 
-webkit-border-top-right-radius: 50px; 
-moz-border-radius-topleft: 50px; 
-moz-border-radius-topright: 50px; 
border-top-left-radius: 50px; 
border-top-right-radius: 50px; 
overflow:hidden; 
}

另外，您不需要使用網站的絕對定位。

要讓您的網站居中，只需給予#wrapper元素「margin：0 auto;」

您所有的元素都使用absolurte positiong。讓他們一個接一個流動並使用浮動 - 不要使用絕對定位來實現這樣的佈局。

來源

2012-11-12 16:40:13

好的，謝謝你的佈局提示。儘管圖像仍與邊框重疊。即使有溢出：隱藏和標題變化編輯：我得到它的工作！謝謝:) – Ayey

奇怪的是，這裏工作：http://jsfiddle.net/beA9B/ - 你不看在IE 6/7/8是你？ –

我編輯了我的第一個評論到你的答案，它現在的作品:) – Ayey

這看起來有點家庭作業，所以我不會寫代碼。

但是，您確實有幾個選項來舍入圖像的角落。我會在方便的順序列出：

設置圖像作爲標題的background-image。
設置圖像的樣式具有圓角。
（不要做這一個）創建一個已經圓角的透明圖像。

來源

2012-11-12 16:53:02 Labu

這是我自己的家庭網站，我用於學習:)但第二點是做了什麼。 – Ayey

啊，我明白了。很高興我能幫上忙。：{d – Labu

如果您正在使用「邊界半徑」 - 這是一個CSS3屬性，那麼你也可以使用「背景夾」，這有效地設置背景剪輯。

有此屬性的三個可用值是：

邊界框，內容箱或填充盒

我想你會發現你正在尋找使用內容框中的一個 （如下）。

#header {background-clipping:content-box}

在css tricks上有一篇很棒的文章來看看。值得一個書籤，它是一個很好的信息來源，以幫助您的CSS/HTML知識增長。

來源

2012-11-12 17:16:55 frazerjay

圖片是重疊的邊框，不知道我是否正確地做它

回答

相關問題