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

Question

是否可以在附加的 fiddle 中，使 counter-increment 元素成为每组 <p> 段落后面居中的水印，并在 [=15] 中有一个选项=]调整counter-increment元素显示的透明量?

附件是Fiddle

如果可以提供更新的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

这应该让你继续

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

您可能需要调整边距才能得到您想要的效果

Answer 2

如果我没听错，我会说，是的，你可以。在我的 Fiddle 中，我添加了 p { position: relative } 需要定位 absolute（:before 或 :after）child over 或 under它。

在本例中在段落下。

通过设置 top、left、bottom 和 [=，使 child（p:before）与 parent 一样高18=] 到 : 0 并给 child 一个低于其 parent 的 z-index 值。因为在这种情况下 <p> 没有 z-index 一个 z-index: -1 对于 child 就可以了。

其余的样式由您决定，我只是给了您一个想法...

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
}

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

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

How to watermark a counter-increment element behind each paragraph <p>?

html

css

css-counter