css background-image无法正常工作

时间:2012-12-15 12:56:32

标签: css background-image image

我使用完全正确的代码:

body
{
background-image:url('gradient2.png');
}

在w3学校发现它的简单我在相同的文件夹中获取了图片,我做了一切,我不知道为什么我不能在css中插入图像。 html标签正在运行。我在3-4个月前遇到了同样的问题,现在又用html工作了,但仍然没有工作。这张照片不会显示出来。

这是我的完整css:

*
{
    margin: 0;
    padding: 0; 
}

body
{
        background: url("pagebg2.jpg") repeat left top;    
    font: normal 10pt Arial,Helvetica,sans-serif;

}

#center{
    box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 1);
    border: 3px solid rgba(0, 0, 0,0.8);
    background-color:#50649d;
    border-radius: 20px 20px;
    width: 650px;
    height:900px;
    margin: 0 auto;

}
#pic {
     text-align:center;
}
img {
    box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 1);
    border: 3px solid rgba(0, 0, 0,0.8);
    border-radius: 20px 20px;
}

这是html:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="CSS/btstyle.css">
        <title></title>
    </head>
    <body>
        <header>this is the title</header>
        <div id="container">
                <div id="pic" class="column">
                <img src="opel.png" />


                </div>


                <div id="center" class="column">

                  center
                </div>
        </div>
        <footer class="foot"><p>©WebMaster pr.toma@gmail.com</p></footer>
    </body>
</html>

3 个答案:

答案 0 :(得分:6)

您的代码非常完美。我在jsFiddle上测试过它。问题在于您的图片网址

检查一下: jsFiddle link

body
{
    background: url("http://jsfiddle.net/img/logo.png") repeat left top;    
    font: normal 10pt Arial,Helvetica,sans-serif;

}

在这里,我只更改图片网址。

答案 1 :(得分:1)

我会评论@MohitPandey,但我需要50点声望,因此我会在这里添加。当您提供直接URL时,最好删除“http”,否则当您在安全页面上显示内容时会出现安全警告。所以修改如下。

body
{
    background: url("//jsfiddle.net/img/logo.png") repeat left top;    
    font: normal 10pt Arial,Helvetica,sans-serif;
}

我是从HTML5Boilerplate学到的。希望它有所帮助!

答案 2 :(得分:0)

错误发生在你身上STYLING ......

.Body
{
  background-image: url('pagebg2.jpg');
  background-repeat: repeat;
  background-position: left top;
  font-family: Arial;
  font-size: 10pt;
}

试试以上......