css - CSS 标题样式

Question

只是想知道如何像附加图像一样设置标题的样式。正在考虑使用两个 div，左侧用于文本，右侧用于水平重复图像。问题是我需要正确的 div 宽度来改变不同的标题长度。

任何帮助，将不胜感激！

标题图片

Answer 1

你可以很简单地做到这一点；

.header{
    width:100%;
    height:20px;
    background:url('http://jsfiddle.net/favicon.png') repeat;
}
.header span{
    background-color:#FFF;
    display:inline-block;
    height: 20px;
}

<div class="header"><span class="title">Header Text</span></div>

您可以将其包含在各个页面中，并相应地调整标题空间的大小。

这是一个有效的现场演示

Answer 2

DIVs分别使用 left 和 right ，width然后到right divusetext-align: right;属性，以便在右 div 中加载的内容将保持向右并根据内容的大小向左增加

<div class="header">
  <div class="left"></div>
  <div class="right"></div>
</div>

.header{overflow: hidden;} //Considering width: 1000px;
.left{float: left; width: 100px;}
.right{float: right; width: 900px; text-align: right;}

Answer 3

出于语义原因，您可以只使用<h1>标签来完成，并为其添加背景图像。使用 padding-right 你现在可以控制它应该重复多少次并填充所需的空间。