Html 内联块的不透明度

我想显示一些文本块，首先只显示标题和几行，然后单击“更多”标记显示所有内容，或者再次隐藏。 我使用了隐藏复选框和标签的CSS技巧，看起来几乎正确

标签{
宽度：50%；
边界半径：5px；
背景：线性梯度（至底部，rgba（255255255,0.0）0%，rgba（0,0128,0.7）100%）；
光标：指针；
}
标签：后{
内容：“查看更多…”；
左缘：1%；
字体：斜体；
字体大小：粗体；
字体大小：较小；
}
.lbl1{
//显示：内联块；
填充顶部：40px；
颜色：白色；
字体：斜体；
}
输入[id^=“更多”]{
显示：无；
}
输入[id^=“more”]：选中。lbl1:之后{
内容：“少展示”；
}
输入[id^=“more”]：选中~.arttxt1{
身高：100%；
}
.arttxt1{
左缘：1%；
宽度：50%；
边缘底部：2px；
线高：2.5ex；
高度：8.4ex；/*2.5ex，每一条可见线*/
溢出：隐藏；
}

德雷格尔
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

这就是你想要的效果吗？ 使用负边距向上移动div

标签{
宽度：50%；
边界半径：5px；
背景：线性梯度（到底部，rgba（255，255，255，0.0）0%，rgba（0，0，128，0.7）100%）；
光标：指针；
}
标签：后{
内容：“查看更多…”；
左缘：1%；
字体：斜体；
字体大小：粗体；
字体大小：较小；
}
.lbl1{
显示：内联块；
填充顶部：40px；
颜色：白色；
字体：斜体；
利润上限：-40px；
左：1%；
}
输入[id^=“更多”]{
显示：无；
}
输入[id^=“more”]：选中。lbl1:之后{
内容：“少展示”；
}
输入[id^=“more”]：选中~.arttxt1{
身高：100%；
}
.arttxt1{
左缘：1%；
宽度：50%；
边缘底部：2px；
线高：2.5ex；
身高：8.4ex；
/*每条可见线2.5ex*/
溢出：隐藏；
}

德雷格尔
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。二人世界
这是一种令人厌恶的行为，因为它是一种不平等的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

澄清一下，它并没有失去透明度-实际发生的是，因为

是一个块元素，标签被向下推到文本下方

因此，您可以根据Chris Li的回答使用

页边距顶部

，或

位置：相对

和

顶部

将标签向上推到文本顶部

标签{
宽度：50%；
边界半径：5px；
背景：线性梯度（至底部，rgba（255255255,0.0）0%，rgba（0,0128,0.7）100%）；
光标：指针；
}
标签：后{
内容：“查看更多…”；
左缘：1%；
字体：斜体；
字体大小：粗体；
字体大小：较小；
}
.lbl1{
显示：内联块；
填充顶部：40px；
颜色：白色；
字体：斜体；
位置：相对位置；
顶部：-40px；
}
输入[id^=“更多”]{
显示：无；
}
输入[id^=“more”]：选中。lbl1:之后{
内容：“少展示”；
}
输入[id^=“more”]：选中~.arttxt1{
身高：100%；
}
.arttxt1{
左缘：1%；
宽度：50%；
边缘底部：2px；
线高：2.5ex；
高度：8.4ex；/*2.5ex，每一条可见线*/
溢出：隐藏；
}

德雷格尔
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

谢谢克里斯，这正是我想要的！这么简单。。。还有@DKyleo的第二个解决方案。非常感谢，也感谢您的解释。