CSS3渐变和背景图像相结合

Question

问题

我正在尝试将CS​​S3渐变功能与特定尺寸的背景图像相结合，并专门放在div中。奇怪的是，background-size属性不仅将大小应用于图像，还应用于渐变。但是我需要保持图像30px并一直应用graident。欢迎任何帮助？

提前致谢

CSS

.accordian-head {
 height: 50px;
 padding: 10px 10px;
 background: #ADADAD;
 background-image: url(../img/plus-icon.png) 97% 50%;
 background-position:97% 50%;
 background-repeat:no-repeat; /* fallback */
 background-size:30px;
 background-image: url(../img/plus-icon.png), -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD)); /* Saf4+, Chrome */
 background-image: url(../img/plus-icon.png), -webkit-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Chrome 10+, Saf5.1+ */
 background-image: url(../img/plus-icon.png),    -moz-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* FF3.6+ */
 background-image: url(../img/plus-icon.png),     -ms-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* IE10 */
 background-image: url(../img/plus-icon.png),      -o-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Opera 11.10+ */
 background-image: url(../img/plus-icon.png),         linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* W3C */
}

Answer 1

您有两个图层，一个用于图像，另一个用于渐变。当您指定一个background-size值时，它将适用于两个图层。

要拉伸渐变，您需要明确赋予它自己的大小：

 background-size:30px, 100%;

Answer 2

你可以做的是使用嵌套的div，并在顶部应用渐变。

<div class="gradient">
    <div class="image" style="background-image:url(../img/plus-icon.png)">
    </div>
</div>

.gradient {
    background: -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD));
    /* etc */
}

.image {
    background-size: 30%;
}