Динамически изменить цвет кнопки фона на более темный в соответствии с его родительским цветом фона - PullRequest
Новая
       1

Динамически изменить цвет кнопки фона на более темный в соответствии с его родительским цветом фона

0 голосов
/ 12 июня 2019

Я создаю страницу с разными цветами фона для разных товаров, и будет кнопка, которая перенаправляет на другой товар.

Я хочу, чтобы фон кнопки был темнее, чем цвет фона 

.a {
  background-color: #cc99ff;
}

.b {
  background-color: #9d0059;
}

.c {
  background-color: #cc3f10;
}

button {
  background-color: transparent;
  border-color: white;
  color: white
}
<div class="a">
  <img alt="img">
  <button>Test</button></div>
<div class="b">
  <img alt="img">
  <button>Test</button></div>
<div class="c">
  <img alt="img">
  <button>Test</button></div>

enter image description here

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Вот другой подход, использующий CSS-переменные, calc () и цвета rgba. 

:root{
  --red-main: 28;
  --green-main: 150;
  --blue-main: 130;
}

.container {
    background-color:
	rgb(
	    var(--red-main),
	    var(--green-main),
	    var(--blue-main)
	);
}

.darker-bg{
   background-color:
	rgb(
	    calc(var(--red-main) - 40),
	    calc(var(--green-main) - 20),
	    calc(var(--blue-main) - 20)
	);
}

/* Just so things looks nicer, not relevant to your question */
body {
    display: flex;
    flex-direction: column;
    text-align: center;
}

* {  
   padding: 15px;
}
<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
    </head>

    <body>
	     <main class="container">
	       <h1>Hello World !</h1>
	       <btn class="darker-bg">My bg is automatically darker</btn>
	     </main>
    </body>
</html>
1 голос
/ 12 июня 2019

Измените background-color: transparent; на background-color: rgba(0,0,0, 0.4);.

Вы можете настроить непрозрачность соответственно 

.a {
  background-color: #309549;
}

.b {
  background-color: #9d0059;
}

.c {
  background-color: #cc3f10;
}

button {
  background-color:  rgba(0,0,0, 0.4); /*Changed*/
  border-color: white;
  color: white
}
<div class="a">
  <img alt="img">
  <button>Test</button></div>
<div class="b">
  <img alt="img">
  <button>Test</button></div>
<div class="c">
  <img alt="img">
  <button>Test</button></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...