如何在语义UI中更改卡内容的颜色？

Question

像这样更改颜色：

我似乎在任何地方都找不到怎么做。

Answer 1

如果要将相同的颜色样式应用于所有卡片，则可以执行以下操作：

.ui.card,
.ui.cards>.card {
  background-color: #D9499A;
}

该卡被分为3个div要素：.image，.content，和.extra.content。如果要单独更改颜色，请执行以下操作：

.ui.card>.content,
.ui.cards>.card>.content {
  background-color: #D9499A;
}

.ui.card>.content.extra,
.ui.cards>.card>.content.extra {
  background-color: #D9499A;
}

检查这个例子拨弄出来：

的HTML

<div class="ui card kristy">
  <div class="image">
    <img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
  </div>
  <div class="content">
    <a class="header">Kristy</a>
    <div class="meta">
      <span class="date">Joined in 2013</span>
    </div>
    <div class="description">
      Kristy is an art director living in New York.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i> 22 Friends
    </a>
  </div>
</div>

<div class="ui card matthew">
  <div class="image">
    <img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
  </div>
  <div class="content">
    <a class="header">Matthew</a>
    <div class="meta">
      <span class="date">Joined in 2015</span>
    </div>
    <div class="description">
      Matthew is an in interior designer living in New York.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i> 47 Friends
    </a>
  </div>
</div>

<div class="ui card molly">
  <div class="image">
    <img src="https://semantic-ui.com/images/avatar2/large/molly.png">
  </div>
  <div class="content">
    <a class="header">Molly</a>
    <div class="meta">
      <span class="date">Joined in 2010</span>
    </div>
    <div class="description">
      Molly is a personal assistant living in Paris.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i> 12 Friends
    </a>
  </div>
</div>

的CSS

.ui.card {
  display: inline-block;
  margin: 10px;
}

.ui.card,
.ui.cards>.card {
  background-color: #5C5D5F;
  color: white;
}

.ui.card.matthew {
  background-color: #2B4B64;
}

.ui.card.kristy {
  background-color: #253E54;
}

.ui.card>.content>a.header,
.ui.cards>.card>.content>a.header,
.ui.card .meta,
.ui.cards>.card .meta,
.ui.card>.content>.description,
.ui.cards>.card>.content>.description,
.ui.card>.extra a:not(.ui),
.ui.cards>.card>.extra a:not(.ui) {
  color: white;
}