Question

如何设置具有特定背景颜色的元素，然后在具有相同背景颜色的两侧伪元素（具有特定宽度）逐渐淡出（渐变从背景颜色alpha 1到0）？

我尝试了以下内容（http://plnkr.co/edit/MobgBy5xyJHv7z839jSA?p=preview），但它并没有完全发挥作用：

<style>
    .label:after {
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(8,170,13,1)), color-stop(100%,rgba(8,170,13,0))); /* Chrome,Safari4+ */
        width: 20px;
        content: ' -- ';
        display: block;
    }

    .label:before {
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(8,170,13,0)), color-stop(100%,rgba(8,170,13,1))); /* Chrome,Safari4+ */
        width: 20px;
        content: ' -- ';
        display: block;
    }

    .label {
        background-color: rgba(8,170,13,1);
    }
</style>

<span class="label">test</span>

我无法将渐变放置在基本元素的左/右位置而不是顶部/底部，渐变仅在内容属性中定义了某些内容时显示（它需要为空）。

Answer 1

您需要将伪元素放在跨度之外，否则无法正确看到它们（因为透明度被跨度背景掩盖）

为此，让他们绝对定位。（并使父位置：相对使其起作用）并使用左，上，右属性：

.label {
    background-color: rgba(8,170,13,1);
    color: white;
    float: left;
    padding: 5px;
    font-family: Arial, sans-serif;
    position: relative;
    margin: 0px 15px;
}

.label:before {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(8,170,13,0)), color-stop(100%,rgba(8,170,13,1))); /* Chrome,Safari4+ */
    width: 20px;
    content: '';
    display: block;
    position: absolute;
    right: 100%;
    height: 100%;
    top: 0px;
}

.label:after {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(8,170,13,1)), color-stop(100%,rgba(8,170,13,0))); /* Chrome,Safari4+ */
    width: 20px;
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    height: 100%;
    top: 0px;
}

demo

Answer 2

如果您举例.label:before { margin-top: -10px; }，您将看到渐变正常工作。 问题是它们下方有绿色背景。
所以有两种解决方案：

将伪元素渐变从白色变为绿色（而不是透明 - >绿色）。

.label:after {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(8,170,13)), color-stop(100%,rgb(255,255,255))); /* change the 0-alpha color to white */
    content: ' ';
    /*float: left;*/ /* you don't need that */
    display: inline-block; /* will move the pseudo-element after the inner text */
}

或
2.在父元素之外移动伪元素。

.label { margin: 0 30px; /*make some space for gradients */ } .label:before, .label:after { top: 0; bottom: 0; position: absolute; } .label:before { left: -30px; /* move the pseudo-element to the left */ } .label:after { right: -30px; /* move the pseudo-element to the right */ }

伪元素的渐变

2 个答案: