在邊界內對圖像使用CSS

我有一些我正在處理的CSS和HTML，我想分出一個圖像的div塊的內容，並保留帶有圓邊的邊框。但是當我預覽代碼時，圖像沒有顯示出來。 CSS和HTML鏈接正確。無可否認，這只是我修補以瞭解關於CSS和HTML的更多信息。在邊界內對圖像使用CSS

如果你可以看看這個，並給我一些關於如何讓圖像顯示在圓形框中的見解，我將不勝感激。

編輯：恐怕我並不完全清楚問題是什麼。標題標籤中與「a.title」CSS代碼關聯的圖像不是問題，這只是一個標題圖像。

的問題是，我希望有一個形象出現在div類=「內容」與那就是div.content的CSS部分傳來的圖像源的HTML的一部分。

我很難解釋我的問題/問題，對不起。但是，迄今爲止，感謝您的幫助！

HTML：

<html> 
<head> 
    <title>Some Title</title> 
    <link href="/Volumes/lastname/sitename/css/style.css" rel="stylesheet" type="text/css" media="all"> 
</head> 

<body> 

    <div id="container">   

     <p class="title"><img src="/Volumes/last/sitename/media/header3.png"></img></p> 

     <div class="navbar"> 
      <a class="nav" href="http://www.facebook.com">Facebook</a> 
      <a class="nav" href="http://www.twitter.com">Twitter</a> 
     </div> 

     <div class="content"> 
     </div> 

    </div> 

</body> 

</html>

這裏的CSS - 我知道它更多的代碼比你需要知道，但這裏的任何方式：

body { 
background: #ffffff 
width: 1000px; 
height: 800px; 
margin: 0 auto; 
font-family: "Arial"; 
} 

#container { 
width: 900px; 
height: 800px; 
margin: 0 auto; 
} 

div.content { 
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat; 
border-style: solid; 
border-width: 2px; 
width: 900px; 
height: 500px; 
margin-top: -20px; 
border-radius: 7px; 
border-color: #a0a0a0; 
} 

a.title { 
margin-top:120px; 
font-size: 36px;  
} 

div.navbar { 
margin-top: -62px; 
float: right; 
font-size: 18px; 
} 
a.nav { 
text-decoration: none; 
color: #717171; 
padding-right: 20px; 
} 
a.nav:hover { 
color: #1299d6; 
} 

div.text { 
margin-top: 100px; 
} 


p.text1 { 
display: block; 
text-align: center; 
} 


p.text2 { 
display: block; 
text-align: center; 
} 


p.text3 { 
display: block; 
text-align: center; 
} 


p.text4 { 
display: block; 
text-align: center; 
} 

div.links { 
margin-top: 50px; 
text-align: center; 
} 

a.links { 
text-decoration: none; 
color: #ffffff; 
padding-left: 10px; 
padding-top: 5px; 
padding-right: 10px; 
padding-bottom: 5px; 
border-radius: 10px; 
opacity: 0.6; 
} 

a.twitter { 
background: #42a300; 
} 

a.contact{ 
background: #1299d6; 
} 

a.subbutton{ 
background: #690260; 
} 

a.links:hover { 
opacity: 1.0; 
}

來源

2012-02-06 Mike Felder

首先你的形象標籤錯誤到底是在相同的代碼。它必須是

<img src="/Volumes/last/sitename/media/header3.png" />

http://jsfiddle.net/vBRBM/

測試代碼。

來源

2012-02-07 00:12:09 borayeris

我剛換到這一點，我在使用CSS的圖像鏈接被抓住了起來，沒想到居然在HTML中的圖像。非常感謝您的幫助。 – 2012-02-07 15:52:39

不客氣Mike。 – borayeris 2012-02-14 14:21:38

你應該採取的圖像出來的div並且爲班級制定規則。

p.title { 
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat  right top; 
border-style: solid; 
border-width: 2px; 
width: 900px; 
height: 500px; 
margin-top: -20px; 
border-radius: 7px; 
border-color: #a0a0a0; 
}

來源

2012-02-07 00:04:29 Billjk

我懷疑它可能與URL有關。也許嘗試..表示法？這取決於圖片與所有其他文件的關係。

body 
{ 
background-image:url(' *CHANGE THIS* '); 
background-repeat:no-repeat; 
background-position:right top; 
border-style: solid; 
border-width: 2px; 
width: 900px; 
height: 500px; 
margin-top: -20px; 
border-radius: 7px; 
border-color: #a0a0a0; 
}

img標籤沒有任何內容，因此它們不需要單獨的結束標籤。通過添加斜線上年底/>像

<img src="/Volumes/last/sitename/media/imagename.jpg" />

來源

2012-02-07 00:10:26

在邊界內對圖像使用CSS

回答

相關問題