Question

所以，我在CSS中使用了这样的东西：

li {
    background-image: url('example.png');
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(100%,rgba(0,0,0,0.15))), url('avatar.png');
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:    -moz-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:     -ms-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:      -o-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:         linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%) 100%), url('avatar.png');
}

但在每个<li>中都会有不同的形象。

Answer 1

您可以使用::before或::after伪元素执行此操作。例如：

li:before {
    content: url('example.png');
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(100%,rgba(0,0,0,0.15))), url('avatar.png');
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:    -moz-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:     -ms-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:      -o-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), url('avatar.png');
    background-image:         linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%) 100%), url('avatar.png');
}

Demo

然后，您将指定一个单独的样式，而不是指定背景图像，其中规则将被后面的渐变样式覆盖，因此它将显示这两个样式。

如何在HTML标记中定义图像以获得更多样式？

1 个答案: