Question

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

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

有没有办法用html + css实现这个pseduocode？

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就会停止重复。

a crude picture explaining what im trying to do

Answer 1

我相信您不想使用id来使用class。

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

.ropetext {
    /* properties */
}

然后在你的HTML中：

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

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

此外，您可以在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>

我没有对此进行过测试，但我相信这正是您正在寻找的目标。

div中的嵌套设计

1 个答案: