要改变行高而不影响背景颜色,可以使用CSS的伪元素和绝对定位来实现。以下是一个示例代码:
HTML:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam id eleifend sapien.
Quisque nec augue eu leo ullamcorper finibus.
CSS:
.container {
position: relative;
}
.container:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: lightblue;
opacity: 0.5;
z-index: -1;
}
.container p {
line-height: 2; /* 改变行高 */
}
在这个例子中,我们将背景颜色添加到.container
的伪元素中,并使用绝对定位将伪元素放在.container
的顶部。通过设置z-index
为-1,使得伪元素处于.container
的下方,不会影响文本内容的显示。
然后,我们通过设置.container p
的line-height
属性来改变行高,而不会影响背景颜色。
你可以根据需要自己调整伪元素和行高的样式。