Question

我正在创建一个页面，该页面具有用于不同产品的不同背景色，并且将有一个重定向到其他产品的按钮。

我希望按钮的背景应该比背景颜色深

.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>

预先感谢！

Answer 1

将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>

Answer 2

这是另一种方法，使用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>

根据其父背景颜色动态将颜色按钮背景更改为更暗

2 个答案: