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

发布于 2024-12-20 20:31:30 字数 430 浏览 0 评论 0原文

我似乎无法弄清楚这一点，但请参阅下图：

see this image

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

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

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

原文

I can't seem to figure this out but see the image below:

see this image

There are a bunch of different div headers with varying text lengths. Because of the way the template is coded, they can't have individual class names. All of them use the same class. Code example is like this:

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

Right now I have the header text inside the "headerText" div and the dots image as a background image on repeat inside "headerDots". I can't seem to figure out how to make the dots image get smaller and wider depending on how wide the header is next to it. Is it possible to code the HTML/CSS in a way that allows for this functionality if I don't have access to give each header its own classname?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南渊 2024-12-27 20:31:30

.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;}

~~演示（有背景色，但原则适用。）~~

更好的演示

.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 (with background color, but principle applies.)~~

Better Demo

回复收藏 0 原文

夏天碎花小短裙 2024-12-27 20:31:30

如果您使用类似的东西并将颜色替换为背景图像或您喜欢的任何内容会怎么样：

<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>

What if you use something like this and just replace the colors with your background image or whatever you like:

<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>

回复收藏 0 原文

遗心遗梦遗幸福 2024-12-27 20:31:30

这就是我要尝试的：

将其包装在具有固定宽度的 DIV 中。
将子 DIV 设置为 width:100%
使垂直虚线成为图像并使用“background-repeat:repeat-x”来填充空间。

如果您对单词和破折号有疑问，请将单词的背景颜色设置为等于垂直破折号更高 z-index 上的灰色。然后，破折号总是填充相同的空间，并且单词重叠，给出可变破折号的外观。

这只是一个想法。

回复收藏 0 原文

辞取 2024-12-27 20:31:30

仅使用 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>');

});

此处的工作示例

With only jquery and no HTML changes....
Applies the background color to the text itself which will cover the dots.

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

回复收藏 0 原文

~没有更多了~