问题：

button标记中的文本不会像预期的那样显示

魏冷勋

2023-03-14

无法更改字体的颜色

正如您所看到的，文本“Weiter”并不显示在按钮中。

下面是它的样式：

.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, #0645a0 0%, #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, #0645a0 0%, #00d4ff 100%) 1;
}
:root {
    --standard-background: rgb(36, 35, 35);
    --standard-text: rgb(116, 116, 116);
    --question-text: rgb(51, 135, 204);
}

我使字体的大小，以显示，字在后面的按钮，我不能改变它的颜色。我试图通过在样式后面使用！重要来避免这种情况，但实际上这也不适合我。

HTML代码：

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

实际上我不知道如何将它带入工作片段。希望还能有帮助

共有1个答案

刘浩思

2023-03-14

问题是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后的样子：

null

/*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, #0645a0 0%, #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, #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;
}

.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, #0645a0 0%, #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>

类似资料：

JPA级联类型不会像我预期的那样工作

你好，亲爱的StackOverflow社区，我最近遇到了一个问题，我不能把一个已经保存的对象的引用放进去。我不想保存或更新对象，因为这些对象是预先插入到我们的数据库中的。所以基本上我的情况是这样的：我有一个父，在本例中它是一个摄取，对象有一个IntakeTimes列表，它们被声明为remainingdoses。有道理，嗯。我的模型看起来如下: 我期待着任何帮助或提示，谢谢社区。
Mongodb查找不像我预期的那样工作

我想使用查找从一个集合中获取一些数据并将其放入另一个集合中。在localfield或foreignfield中写什么都不重要，因为它从player_game_stats中获取所有数据并将其插入player集合中的每个文档中。我想检查localfield和foreignField是否相等，但lookup不检查这一点。我对mongodb使用NoSqlBooster
JPA@preupdate@persist似乎不像预期的那样工作

最后是持久性上下文配置：我很感谢你的帮助。
Kafka的保留政策并不像预期的那样奏效

我想让某个Kafka主题只保留一天的数据。但如果我们继续向主题（活动）发送数据，它似乎根本没有删除任何数据。我尝试了主题端参数（Retention.ms）和服务器端：但如果我们继续向它发送数据，它似乎对活的主题不起作用。只有当我们停止向主题发送数据时，它才会遵循保留策略。那么，一个活动主题的正确配置是什么，只保留数据一段时间？
setFont（）方法不能像预期的javafx那样处理label

我正在创建一个简短的javafx程序，包含一个带有一些文本的标签和一个按钮，该按钮应该将标签的字体改为斜体。由于我使用的字体是自定义字体，所以我不能直接调用，因为javafx不能将自定义字体转换为斜体或粗体。因此，我决定有两个不同的字体文件与相同的字体家族，其中一个有常规风格，另一个有斜体风格。因此，当单击斜体按钮时，程序将加载斜体字体文件，并将标签的字体设置为斜体字体。但是当我尝试这个程序时
Avro向后兼容性不像预期的那样工作

我有两个Avro模式V1和V2，在spark中读取如下： V1有两个字段“一”和“二” V2 与新字段：“三” 场景：编写器使用 V1 进行写入，读取器使用 V2 对 avro 记录进行解码。我的期望是看到字段3填充了默认值，即null。但是我在spark工作中遇到了以下异常。我是不是错过了什么？我的理解是avro支持向后兼容。

button标记中的文本不会像预期的那样显示

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档