Wie ändert man die Farbe des Inhalts einer Karte in der Semantic UI? - css, semantisch-ui

So ändern Sie die Farbe: Bildbeschreibung hier eingeben

Ich finde nicht, wie ich es überall machen soll.

Antworten:

3 für die Antwort № 1

Wenn Sie den gleichen Farbstil auf alle Ihre Karten anwenden möchten, können Sie Folgendes tun:

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

Die Karte ist in 3 unterteilt div Elemente: .image, .content, und .extra.content. Wenn Sie die Farben einzeln ändern möchten, tun Sie Folgendes:

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

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

Überprüfen Sie dieses Beispiel Geige aus:

HTML

<div class="ui card kristy">
<div class="image">
<img src="/images/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="/images/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="/images/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;
}

Speisekarte