0

请原谅我的网络编程能力非常有限，这使得即使在谷歌上搜索这些主题也很困难，因为我不知道正确的术语..

无论如何，我的问题（我肯定会用奇怪的措辞，因为我真的不知道如何谈论这个问题）是：

有没有办法用 html + css 实现这个伪代码？

css 文件：

#ropeimage {
    background-repeat:repeat-x;
    background:url(images/rope.png);
}

#ropetext {
    <div id="ropeimage">
   /* some text properties */
}

然后在html文件中

<div id="ropetext">hello</div>
<div id="ropetext">there</div>

我问的原因是，即使我知道我可以做类似的事情

<div id="ropetext"><div id="ropeimage">hello</div></div>
<div id="ropetext"><div id="ropeimage">there</div></div>

如果我知道我总是需要这个，为什么不把它藏在 css 文件中。

如果有人好奇，我想做的是构建一个 div 来重复 x 一个“绳子”图像，然后垂直打印一些文本。我通常不能将所有这些都放在一个 div 中，因为绳索的背景图像会在文本下重复，所以我需要两个 div 以便图像在碰到文本 div 时立即停止重复。

一张粗略的图片解释了我想要做什么

4

1 回答 1

2

相信与其用不如用id你想用class。

所以你的 CSS 看起来像这样：

.ropetext {
    /* properties */
}

然后在您的 HTML 中：

<div class="ropetext"></div>

类和 ID 之间的区别在于您只想将 ID 用于一个 HTML 标记。一个类可以应用于许多标签。

此外，您可以在 CSS 中进行嵌套样式定义：

.rope {
    /* properties defining any rope div in general */
    position: relative;
}

.rope .top {
    /* properties defining the top of the div */
    /* background image stuff goes here */
}

.rope .bottom {
    /* properties defining the bottom of the div */
    position: absolute;
    bottom: 0px;
}

在您的 HTML 中：

<div class="rope">
    <div class="top">
    </div>
    <div class="bottom">
        Hello
    </div>
</div>

我尚未对此进行测试，但我相信这符合您的要求。

于 2013-04-10T22:53:36.947 回答