1

我有以下要应用于元素的背景属性：

background: url('../img/bg.png') !important;

background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;

我希望首先显示图像，然后在其上显示渐变。是否有可能做到这一点？

4

3 回答 3

2

因为渐变被认为是图像background（或几乎任何采用图像的 CSS 属性），所以您可以简单地在渐变之后用逗号列出图像。需要注意的是，由于您有这么多前缀，您需要为每个前缀重复图像 URL：

background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))), url('../img/bg.png') !important;
background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;

我把!important令牌留在里面，但如果它们没有用于任何特定目的，你可能应该删除它们。我确实删除了这-ms-linear-gradient()条线，因为它绝对不需要。

于 2013-08-14T18:43:13.617 回答
1

它可能需要两个元素，但您可以使用伪元素使事情变得更简洁。小提琴。

#yourelement {
    position: relative;

    background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
    background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
    background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
    background: -ms-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
    background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
}

#yourelement:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: url('../img/bg.png') !important;
}
于 2013-08-14T18:37:41.653 回答
0

我刚刚尝试过，幸运的是，这在我的 Safari 浏览器中有效。

background: url('img.png'), -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%,transparent 50%,rgba(0, 0, 0, 1) 100%);

所以在你的情况下你会使用

background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0, 0, 0, 1)), color-stop(50%,transparent), color-stop(100%,rgba(0, 0, 0, 1))), url('../img/bg.png');

这是一个小提琴

于 2013-08-14T18:37:30.123 回答