如何在标题图片顶部制作带有文字和徽标的标题图片?

时间:2015-10-25 15:34:17

标签: html css image header

我试图为我的网站制作一个标题图片,这样我就可以在我的网站上显示我已经使用过的徽标和文字以及后台的图片。

html代码如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title> The World Traveller </title>
<link rel="stylesheet" href="main.css">

<div id="wrapper";>

<header>
    <h2 class="logo"> logo here </h2>
    <h1> The World traveller </h1>
</header>

主css文件包含:

body {
background-color:#696969;
margin:0;
padding:0;
font-family:"Arial" san-serif;
}



.logo{
text-indent: -99999px;
background: url("logo2.jpg");
width: 200px;
height:170px;
margin:0;
}

header {
background-image:dodgeblue;
padding:0 0 15px;

background-color:#4682B4;
padding: 40px 0;
text-align: center;
color: white;
}

我不知道该怎么做,会喜欢一些帮助,谢谢你。 :) 如果我需要把更多的代码放在这里让我知道。

1 个答案:

答案 0 :(得分:0)

将标题更改为此。

<header>
<img src class="logo"> 
<h1> The World traveller </h1>
</header

你需要更改你的徽标类来说背景图像而不仅仅是背景。

.logo{
text-indent: -99999px;
background-image: url("logo2.jpg");
width: 200px;
height:170px;
margin:0;
}

你也有

header {
background-image:dodgeblue;
padding:0 0 15px;
background-color:#4682B4;
padding: 40px 0;
text-align: center;
color: white;
}
由于你已经有了背景颜色,所以dodgeblue不是我要删除的图片。