Question

我有一些我正在处理的CSS和HTML，我想要将图像的div块的内容分出来并保持边框的圆角边缘。但是，当我预览代码时，图像没有显示出来。 CSS和HTML正确链接。不可否认，这只是我修补关于CSS和HTML的更多信息。

如果你能看一下并给我一些关于如何让图像显示在圆形框中的见解，我将不胜感激。

编辑：我担心我对问题的解释不够清楚。标题标签中与“a.title”css代码相关联的图像不是问题，只是标题图像。

问题是我希望图像出现在HTML的div class =“content”部分中，图像源来自CSS部分div.content。

我很难解释我的问题/抱歉，抱歉。但是，感谢你迄今为止的所有帮助！

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;
}

Answer 1

首先，您的图片代码是错误的。一定是

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

http://jsfiddle.net/vBRBM/

测试代码。

Answer 2

你应该从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;
}

Answer 3

我怀疑它可能与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" />

将CSS用于边框内的图像

3 个答案: