Question

在附加的小提琴中，是否有可能使counter-increment元素成为每组<p>段后面的水印，并在CSS中有一个选项调整counter-increment元素显示的透明量？

附件是Fiddle

如果可以提供更新的小提琴，我将非常感激，因为我还不熟悉编码。

HTML：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim
vitae dolor luctus gravida. Vestibulum elementum eget augue eu imperdiet.
Vestibulum rhoncus nibh eget lorem sodales auctor. Maecenas egestas
volutpat condimentum. Mauris et lacinia nisl, a condimentum neque. Nunc
euismod arcu volutpat odio auctor rhoncus vel sit amet lorem. Donec
consectetur lacus arcu, vel dictum nisi consectetur sit amet. Vivamus vel
nisl vel metus maximus pulvinar. Suspendisse non lacinia massa, at
condimentum justo. Suspendisse potenti. Curabitur enim leo, venenatis nec
quam id, elementum lacinia sem. Aenean velit dui, viverra ac placerat
tempus, pharetra a est.</p><br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim
vitae dolor luctus gravida. Vestibulum elementum eget augue eu imperdiet.
Vestibulum rhoncus nibh eget lorem sodales auctor. Maecenas egestas
volutpat condimentum. Mauris et lacinia nisl, a condimentum neque. Nunc
euismod arcu volutpat odio auctor rhoncus vel sit amet lorem. Donec
consectetur lacus arcu, vel dictum nisi consectetur sit amet. Vivamus vel
nisl vel metus maximus pulvinar. Suspendisse non lacinia massa, at
condimentum justo. Suspendisse potenti. Curabitur enim leo, venenatis nec
quam id, elementum lacinia sem. Aenean velit dui, viverra ac placerat
tempus, pharetra a est.</p>

CSS：

body {
counter-reset: section;
}

p:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

Answer 1

如果我找对你，我会说，是的，你可以。在我的Fiddle中，我添加了需要p { position: relative } absolute（之前或之后）儿童超过或位于之下。

在这种情况下段落。

通过将p:before，top，left和bottom设置为right，让孩子（: 0）与父母一样高给孩子一个低于其父亲的z-index值。在这种情况下，<p>没有z-index，z-index: -1对于孩子来说会很好。

其余的造型取决于你，我只是给了你一个想法......

＆＃13;

body {
    counter-reset: section;
}
p {
    position: relative
}
p:before {
    counter-increment: section;
    content: "Section " counter(section) ". ";

    z-index: -1;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    font-size: 100px; color: rgba(0,0,0,0.1); font-weight: bold;
    text-align: center
}

＆＃13;

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim
    vitae dolor luctus gravida. Vestibulum elementum eget augue eu imperdiet.
    Vestibulum rhoncus nibh eget lorem sodales auctor. Maecenas egestas
    volutpat condimentum. Mauris et lacinia nisl, a condimentum neque. Nunc
    euismod arcu volutpat odio auctor rhoncus vel sit amet lorem. Donec
    consectetur lacus arcu, vel dictum nisi consectetur sit amet. Vivamus vel
    nisl vel metus maximus pulvinar. Suspendisse non lacinia massa, at
    condimentum justo. Suspendisse potenti. Curabitur enim leo, venenatis nec
    quam id, elementum lacinia sem. Aenean velit dui, viverra ac placerat
    tempus, pharetra a est.</p><br>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim
    vitae dolor luctus gravida. Vestibulum elementum eget augue eu imperdiet.
    Vestibulum rhoncus nibh eget lorem sodales auctor. Maecenas egestas
    volutpat condimentum. Mauris et lacinia nisl, a condimentum neque. Nunc
    euismod arcu volutpat odio auctor rhoncus vel sit amet lorem. Donec
    consectetur lacus arcu, vel dictum nisi consectetur sit amet. Vivamus vel
    nisl vel metus maximus pulvinar. Suspendisse non lacinia massa, at
    condimentum justo. Suspendisse potenti. Curabitur enim leo, venenatis nec
    quam id, elementum lacinia sem. Aenean velit dui, viverra ac placerat
    tempus, pharetra a est.</p>

＆＃13;

Answer 2

这应该让你去

body {
    counter-reset: section;
}

这很重要，因此该部分的位置相对于段落是绝对的

p {
    position:relative;
}

现在是水印

p:before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
    position:absolute;
    left:50%;
    top: 50%;
    font-size:50px;
    margin-top:-25px;
    margin-left:-3em;
    font-weight:bold;
    opacity:0.3;
    z-index:-1;   
}

您可能需要使用边距来获得它想要的

如何为每个段落后面的反增量元素添加水印<p>？

2 个答案: