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

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

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

#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以使其弹出。在浏览器中，文本总是比图像文本更好。