问题描述
无法更改字体的颜色，如图here。如您所见，文本“Weiter”未按预期显示在按钮中。
我将字体设置得那么大以显示，这个词在按钮后面，而且我不能改变它的颜色。我试图通过在样式背后使用 !important 来避免这种情况，但实际上这对我也不起作用。
我实际上不知道如何将其带入工作片段中。希望仍然有帮助！
.btn--next {
font-size: 100px;
color: var(--standard-text) !important;
}
.btn {
height: 3rem;
width: 10rem;
border-radius: 5px;
background: linear-gradient(to right,#0645a0 0%,#00d4ff 100%);
border: none;
font-family: 'Fjalla One';
font-size: 1.4rem;
outline: none;
cursor: pointer;
align-items: center;
display: flex;
justify-content: center;
text-decoration: none;
color: black;
}
user agent stylesheet
button {
appearance: auto;
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(black,white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;
cursor: default;
background-color: -internal-light-dark(rgb(239,239,239),rgb(59,59,59));
Box-sizing: border-Box;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 6px;
border-width: 2px;
border-style: outset;
border-color: -internal-light-dark(rgb(118,118,118),rgb(133,133,133));
border-image: initial;
}
.content--task {
font-size: 1rem;
background-image: linear-gradient(to right,#00d4ff 100%);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
font-family: 'Fjalla One';
display: none;
flex-direction: column;
width: 20rem;
align-items: center;
word-wrap: break-word;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
}
.container {
display: flex;
height: 12rem;
width: 20rem;
border: 5px solid;
text-align: center;
align-items: center;
justify-content: center;
border-image: linear-gradient(to right,#00d4ff 100%) 1;
}
:root {
--standard-background: rgb(36,35,35);
--standard-text: rgb(116,116,116);
--question-text: rgb(51,135,204);
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Lets give it a sip</title>
<script src="../js/script.js"></script>
<link rel="stylesheet" href="../css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet">
</head>
<body>
<div class="interface interface--characters">
<h1 class="title title--characters">Lets give it a sip</h1>
<form class="form form--character" action="game.html">
<div class="form--inputs">
<input type="text" class="input input--players" placeholder="Spieler 1"><br>
<input type="text" class="input input--players" placeholder="Spieler 2"><br>
<input type="text" class="input input--players" placeholder="Spieler 3"><br>
<input type="text" class="input input--players" placeholder="Spieler 4"><br>
</div>
<br>
<button class="btn btn--add-characters" type="button">Spieler hinzufügen</button>
<button class="btn btn--continue" type="button" style="margin-bottom: 2em;">Fortfahren</button>
</form>
</div>
<div class="interface interface--start">
<fieldset class="container container--rounds">
<legend class="title title--game">Lets give it a sip</legend>
<div class="content content--round">
<p class="text text--round">Runde: </p><br>
<button class="btn btn--start" type="button">Start</button>
</div>
<div class="content content--selection">
<ul class="list list--players"></ul>
</div>
<div class="content content--task">
<h2 class="name name--player"></h2>
<h4 class="phrase phrase--question"></h4>
<button class="btn btn--next" type="button">Weiter</button>
</div>
</fieldset>
</div>
</body>
</html>解决方法
问题是 div 中所有类为 content--task 的元素都继承了 -webkit-text-fill-color 属性，该属性设置（两次）为 transparent：>
.content--task {
/* ... */
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent; /* duplicate */
font-family: 'Fjalla One';
/* ... */
}
与其在 .content--task 上声明，您应该将它放在应该得到这种处理的特定元素上，否则您将不得不编写样式来撤消它。
删除 *-text-fill-color 后的样子：
/*RESET CSS*/
body,html {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
background-color: var(--standard-background);
}
/*root*/
:root {
--standard-background: rgb(36,35,35);
--standard-text: rgb(116,116,116);
--question-text: rgb(51,135,204);
}
/* GENERAL CSS */
.interface {
display: flex;
height: 100%;
width: 100%;
background-color: var(--standard-background);
justify-content: center;
align-items: center;
}
.container {
display: flex;
height: 12rem;
width: 20rem;
border: 5px solid;
text-align: center;
align-items: center;
justify-content: center;
border-image: linear-gradient(to right,#0645a0 0%,#00d4ff 100%) 1;
}
.title {
font-family: 'Parisienne',cursive;
font-weight: 900;
font-size: 3rem;
background-image: linear-gradient(to right,#00d4ff 100%);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}
.btn {
height: 3rem;
width: 10rem;
border-radius: 5px;
background: linear-gradient(to right,#00d4ff 100%);
border: none;
font-family: 'Fjalla One';
font-size: 1.4rem;
outline: none;
cursor: pointer;
align-items: center;
display: flex;
justify-content: center;
text-decoration: none;
color: black;
}
.interface--start {
height: 100vh;
width: 100vw;
display: flex;
}
.container--rounds {
flex-direction: column;
height: auto;
width: 20rem;
}
.content--round {
display: block;
}
.content--task {
font-size: 1rem;
background-image: linear-gradient(to right,#00d4ff 100%);
-webkit-background-clip: text;
-moz-background-clip: text;
font-family: 'Fjalla One';
display: none;
flex-direction: column;
width: 20rem;
align-items: center;
word-wrap: break-word;
/* IE 5.5-7 */
white-space: -moz-pre-wrap;
/* Firefox 1.0-2.0 */
white-space: pre-wrap;
/* current browsers */
}
.btn--next {
font-size: 100px;
color: var(--standard-text) !important;
}
.content--task {
display: flex;
}<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet">
<div class="interface interface--start">
<fieldset class="container container--rounds">
<legend class="title title--game">Lets give it a sip</legend>
<div class="content content--task">
<h2 class="name name--player"></h2>
<h4 class="phrase phrase--question"></h4>
<button class="btn btn--next" type="button">Weiter</button>
</div>
</fieldset>
</div>