html - div的背景色只有一定的高度

Question

我有一个透明的 div，我想将背景颜色设置为整个 div 大小的 60%。示例:我的网站上有一个带图片的内容。假设我想将 60% 的内容背景颜色设置为白色，内容的上半部分保持透明。

.test p{
    background-color: #f6d8d8;
}
.test p:first-child{
    background-color: transparent;
}

这是一个例子:http://jsfiddle.net/318wsehf/我只想在最后两段有红色。第一段应该保持透明，因为它在外部 div 中设置。我如何应用此样式？

我已经更改引用:http://jsfiddle.net/318wsehf/1/

Answer 1

可以使用渐变

.test{
    background: linear-gradient(to bottom, #f6d8d8 0%,#f6d8d8 40%,rgba(0,0,0,0) 40%);
}