在边界内对图像使用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

回答

相关问题