Question

很确定这是不可能的，但我想我会问

我这里有一个jsfiddle - https://jsfiddle.net/uprfxhL9/1/

我可以使用SASS's变暗来使用颜色和百分比来改变颜色。

我实际上正在使用一个按钮，其中颜色在CMS中设置，所以我不知道CSS中的颜色。

有可能无论如何都要说颜色是否按百分比变暗，而实际上颜色不会变暗。

    $base-color: #f22727;

    .btn{  
        color: white;
        display: inline-block;
        padding: 10px 20px;
        margin: 0 0 5px 0;
        text-decoration: none;
        background-color: $base-color; 
    }

    .one{ 
        &:hover{
            background-color: darken($base-color, 20%);
        }
    }

It worked a lot for me thanx!! I've just settle down the darken value to 
15%, so that it would come more lighter. Look at my codes below:

    .my-class {
        background: darken($color-base, 15%);
         padding: 20px;

Answer 1

要回答你的问题，不，这是不可能的但是，您可以使用框阴影使其变暗，就像在this answer中发布的那样：

box-shadow:inset 0 0 0 500px rgba(0,0,0,0.5);

这会产生完全相同的效果，您可以看到in this codepen。

如果.btn没有任何内容，或者您想使用多个元素，则可以使用过滤器：

  -webkit-filter: brightness(.5);
  filter: brightness(.5);

但是，过滤器没有最好的支持（在IE中根本不支持它们）

SASS - 使用颜色变暗而不使用颜色

1 个答案: