Question

我似乎无法解决这个问题，但请看下面的图片：

see this image

有许多不同的div标题，文本长度各不相同。由于模板的编码方式，它们不能具有单独的类名。他们都使用同一个班级。代码示例如下：

<div class="headerText"></div>
<div class="headerDots"></div>

现在我在“headerText”div中有标题文本，而dot图像作为背景图像在“headerDots”内重复。我似乎无法弄清楚如何使点图像变小和变宽，这取决于标头旁边的宽度。是否有可能以允许此功能的方式对HTML / CSS进行编码，如果我没有权限为每个标题赋予其自己的类名？

Answer 1

.headerText{background:white; display:inline-block; position:relative; z-index:100;}
.headerDots{background:url(dots.gif); height:10px; position:relative; top:-25px; z-index:10;}

~~Demo（背景颜色，但原则适用。）~~

Better Demo

Answer 2

如果你使用这样的东西，只需用背景图片或任何你喜欢的颜色替换颜色，该怎么办：

<html>
<head>
<style type="text/css">

#container {
  height: 100px;
  width: 200px;
  background: #ccc;
}

.headerText {
padding-right:20px;
background: yellow;
color: black;
float: left;
clear: left;
}
.headerDots {
  padding: 10px, 10px;
  float: left;
  width: 100%;
  background: blue;
}
</style>

<body>
<div id="container">

  <div class='headerDots'>
    <div class='headerText'>My Header Text</div>
   <div class='headerText'>small</div>
   <div class='headerText'>A little more text than usual</div>
  </div>
</div>

</body>
</html>

Answer 3

这就是我想要的：

将其包裹在具有固定宽度的DIV中。
将子DIV设置为width：100％
将垂直短划线设为图像，并使用“background-repeat：repeat-x”填充空间。

如果单词和破折号有问题，请在垂直破折号较高的z-index上将背景颜色设置为等于该灰色的单词。然后破折号总是填充相同的空格和单词叠加，给出可变破折号的外观。

这只是一个想法。

Answer 4

只有jquery而且没有HTML更改.... 将背景颜色应用于文本本身，这将覆盖点。

jQuery(document).ready(function() {

  var Texttext = $('.headerText').html();
  $('.headerText').html('<span style="background: #ddd; padding: 0 5px 0 0;">' + Texttext + '<span>');

  var Dotstext = $('.headerDots').html();
  $('.headerDots').html('<span style="background: #ddd; padding: 0 5px 0 0;">' + Dotstext + '<span>');

});

Working example here

使用可调整宽度的背景图像编码div标头

4 个答案: