Question

CSS中导航栏设计的HTML div无效。

CSS

/* CSS Document */

*{
    margin: 0px;
    padding: 0px; 
}

.clear {
    clear:both;
    height:0px; 
}

body {  
    background:url(../images/bg.jpg) no-repeat scroll center top #13120d;   

    margin: 0;  
    padding: 0;     
    font-family: Tahoma;
    font-size: 13px; 
}   

#header_menu_bg {
    background: url('../images/navigation.png') no-repeat center top;
    height: 198px;  
    width: 737px; 
}

这只是一个简短的例子。

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="robots" content="index, follow"/>
        <meta name="keywords" content="bla"/>
        <meta name="description" content="bla"/>
        <title>WEBSITE</title>

        <link rel="stylesheet" type="text/css" href="styles/main.css"/>
        <link rel="shortcut icon" href="favicon.png"/>
    </head>
    <body>
        <div id="header_menu_bg">

非常感谢任何帮助！

Answer 1

您需要为其指定width属性。

#header_menu_bg {
background: url(../images/navigation.png) no-repeat center top;
height: 280px;
width: 200px; }

修改

检入控制台日志，查看浏览器是否存在查找图像的问题。也许你有错误的道路。

编辑2

关闭<body>和<div>代码。

Answer 2

确保图片的网址正确无误。
将网址放在'或"代码（url("../images/navigation.png")）
为div添加宽度，f.e。 width: 200px;

编辑：查看完整的HTML后，您还需要关闭<body>和<html>代码。

您的完整代码如下所示：

<强> HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="robots" content="index, follow"/>
    <meta name="keywords" content="bla"/>
    <meta name="description" content="bla"/>
    <title>WEBSITE</title>

    <link rel="stylesheet" type="text/css" href="styles/main.css"/>
    <link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
    <div id="header_menu_bg"></div>
</body>
</html>

<强> CSS：

*{
    margin: 0px;
    padding: 0px; 
}

.clear {
    clear:both;
    height:0px; 
}

body {  
    background-color: #13120d;  
    margin: 0;  
    padding: 0;     
    font-family: Tahoma;
    font-size: 13px; 
}   

#header_menu_bg {
    background: url('http://placehold.it/737x198') no-repeat center top;
    height: 198px;  
    width: 737px; 
}

DEMO：JSBin（JSFiddle目前似乎不起作用）

Answer 3

假设您已正确引用css文件且html编码结构中没有错误，我建议清除浏览器缓存。

Answer 4

background: url(../images/navigation.png) no-repeat center top;

你需要“”或“像这样：

background: url('../images/navigation.png') no-repeat center top;

这可能对你有所帮助

Answer 5

以下css可以工作并将图像放入DIV中。小提琴现在不工作，我现在无法为它设置链接。

#header_menu_bg 
{
    background-image: url('fnordware.com/superpng/pngtest16rgba.png'); 
    height: 32px; 
    width: 32px; 
}

如果此css不适合您，您的网址错误或其他错误。

Answer 6

试试这个：

从Here下载示例图片并将其另存为 bg.jpg 。

创建一个新文件夹并将下面的2个文件放在＆amp;同一文件夹中的图像。

HTML （index.html）

<!DOCTYPE html>   
<head>
   <title>WEBSITE</title>
   <link rel="stylesheet" type="text/css" href="main.css"/>        
</head>
<body>
    <div id="header_menu_bg">
</body>
</html>

CSS （main.css）

body 
{     
background-color: #13120d;  
margin: 0;  
padding: 0;     
font-family: Tahoma;
font-size: 13px; 
}

#header_menu_bg
{
background: url('bg.jpg') no-repeat center top;
width: 280px;  
height: 500px; 
}

<强> RESULT ：

enter image description here

HTML div背景图片不起作用

6 个答案: