-1

是否可以在附加的小提琴中使counter-increment元素成为居中每组<p>段落后面的水印，并且还可以选择CSS调整元素的透明显示量counter-increment？

附上小提琴

如果可以提供更新的小提琴，将不胜感激，因为我还是编码新手。

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) ". ";
}
4

2 回答 2

2

如果我理解正确，我会说，是的，你可以。在我的小提琴中，我添加 了将（：之前或：之后）孩子放置在其上方或下方p { position: relative }所需的位置。absolute

在这种情况下根据段落。

通过设置、和to使孩子 ( p:before) 与父母一样高，并给孩子一个低于其父母的值。因为在这种情况下没有一个孩子会做得很好。topleftbottomright: 0z-index<p>z-indexz-index: -1

其余的造型由你决定，我只是给你一个想法......

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>

于 2015-11-16T03:13:16.337 回答
0

这应该让你去

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

您可能需要利用边距才能获得想要的效果

于 2015-11-16T03:08:56.733 回答