html - 将文本添加到徽标图像的最佳方法

Question

我想为我的徽标实现如下图所示的效果，但只有黑色矩形是图像，我希望文本是真实文本。我尝试了下面的代码（另请参见似乎正在工作的 jsfiddle http://jsfiddle.net/ueZ2H/）但不确定这是否是实现此目标的一种干净有效的方式？非常感谢

<div id="header">
    <div id="logo">
        <div class="name">Dave Black</div>
        <div class="address">Address in Paris</div>
        <div class="job">Job</div>
    </div>
</div

CSS：

/***********/
/*! Reset  */
/***********/
* {
    margin: 0;
    padding: 0;
    border: 0;

}
Html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family:'Open Sans', sans-serif;
}
/************/
/*! Header  */
/************/
#header {
    width: 100%;
    height: 280px;
}
#logo {
    float: left;
    margin-left: 20px;
    color: #000;
    height: 95px;
    font-size: 20px;
    background-image: url("http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg");
    background-repeat: no-repeat;
}
#logo .name {
    padding-left:90px;
    color: red;
}
#logo .address {
    padding-left:90px;
    color: green;
}
#logo .job {
    padding-left:90px;
    color: purple;
}

Answer 1

name通过在容器中而不是在等行中包含填充，为自己节省一些 CSS，并使添加其他字段更容易。背景图像将保留在原位。

#logo {
    float: left;
    margin-left: 20px;
    color: #000;
    height: 95px;
    font-size: 20px;
    background-image: url("http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg");
    background-repeat: no-repeat;
    padding-left: 90px;
}

#logo .name {
    color: red;
}

#logo .address {
    color: green;
}

#logo .job {
    color: purple;
}

此外，除非您打算在其他地方使用name,address和job类，否则没有理由在这里限定它们：

.name {
    color: red;
}

.address {
    color: green;
}

.job {
    color: purple;
}

更新小提琴：http: //jsfiddle.net/ueZ2H/1/

Answer 2

我从 css 中修剪了一些脂肪

 Html, body {
margin: 0;
padding: 0;
border: 0;
background: #fff;
font-family:'Open Sans', sans-serif;
}

 #header {
width: 100%;
height: 280px;
}

 #logo {
float: left;
margin-left: 20px;
height: 95px;
font-size: 20px;
background: url("http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg")   no-repeat;
padding-left:90px;
}

#logo .name {
 color: red;
}

#logo .address {
color: green;
}

#logo .job {
color: purple;
}

http://jsfiddle.net/KpjYS/2/

Answer 3

这行得通，我会改变font-size并vertical-align让它流行起来。在浏览器中，文本总是比图像文本呈现得更好。