2015-11-11 3 views
-1

Довольно уверен, что это не возможно, но думал, я хотел бы спроситьSASS - Использование цвета темнеют без использования цвета

У меня есть jsfiddle здесь - https://jsfiddle.net/uprfxhL9/1/

я могу использовать Темнее Sass, чтобы изменить цвет с помощью цвет и процент.

Я работаю с кнопкой, где цвет установлен в 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; 
+0

Какой цвет, по вашему мнению, должен быть затемнен здесь? – cimmanon

+0

Цвет кнопки, но я не знаю этого цвета в css, поскольку он установлен в CMS и добавлен как встроенный стиль css – ttmt

ответ

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 вообще)

Смежные вопросы