如何在 Semantic 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;
}

检查此示例 Fiddle：

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;
}

Answer 2

你可以给对象一个id，然后用CSS设置颜色，例如：

#header-blue{
    background-color: #1A3E6E;
}

如何在 Semantic UI 中更改卡片内容的颜色？

How to change the color of a card's content in Semantic UI?

css

semantic-ui

HTML

CSS