webentwicklung-frage-antwort-db.com.de

So ändern Sie die Deckkraft eines Kartenblocks in Bootstrap 4

Hey, ich habe nur eine einfache Card Bootstrap 4-Komponente.

<div class="card">
    <div class="card-header">This is my header</div>
    <div class="card-block">This is my block</div>
    <div class="card-footer">This is my footer</div>
</div>

Was ich erreichen wollte, war die Kopf- und Fußzeile mit einer Deckkraft von 1, aber den Block mit einer Deckkraft von 0,4. Ich habe versucht, Rbga ohne Hintergrund in der Hintergrundfarbe zu verwenden

.card-block { background-color: rgba(245, 245, 245, 0.4); }
3
Luke Flournoy

Es stellte sich heraus, dass die Bootstrap-Klasse .card den Hintergrund-Opazität-Css-Stil überschrieb, den ich auf .card-block setzen wollte - unabhängig davon, ob ich ein wichtiges Schlüsselwort setze oder nicht. 

Ich konnte dies korrigieren, indem ich den Hintergrund der Karte hinzufügte und einfach die einzelnen opacities des .card-Headers und . card-footer auf 1 änderte.

.card { background-color: rgba(245, 245, 245, 0.4); }
.card-header, .card-footer { opacity: 1}
2
Luke Flournoy

haben Sie versucht, opacity zu verwenden 

.special-card {
/* create a custom class so you 
   do not run into specificity issues 
   against bootstraps styles
   which tends to work better than using !important 
   (future you will thank you later)*/

  background-color: rgba(245, 245, 245, 1);
  opacity: .4;
}
<div class="card">
  <div class="card-header">This is my header</div>
  <div class="card-block special-card">This is my block</div>
  <div class="card-footer">This is my footer</div>
</div>

5
happymacarts

Versuchen Sie diesen Ansatz

[~ # ~] html [~ # ~]

<div class="card text-white bg-success mb-3 mt-4" style= "">
    <div class="card-header">Пользователь</div>
    <div class="card-body special-card" style="">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="card text-white bg-primary mb-3" style=" ">
    <div class="card-header">Привязанный профиль персонала</div>
    <div class="card-body special-card">
        <h5 class="card-title">Secondary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="card text-white bg-danger mb-3" style=" ">
    <div class="card-header">Права доступа профиля персонала</div>
    <div class="card-body special-card">
        <h5 class="card-title">Success card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

[~ # ~] CSS [~ # ~]

 .special-card {
            background-color: rgba(245, 245, 245, 0.4) !important;
        }

enter image description here

1
Developer

bitte probieren Sie folgendes aus:

<div class="card-transparent">
  <div class="card-header">This is my header</div>
  <div class="card-block special-card" style="background-color: rgba(245, 245, 245, 0.4); ">This is my block</div>
  <div class="card-footer">This is my footer</div>
</div>
0
Jorge Opazo

die Deckkraft unterscheidet sich von der Hintergrundfarbe. Durch die Deckkraft wird die Transluzenz des Elements festgelegt, und die Hintergrundfarbe wird nur für die Farbe des Hintergrunds festgelegt.

Das hört sich vielleicht ähnlich an, aber sie sind sehr unterschiedlich.

Der große Unterschied ist, dass die Deckkraft den Text und die untergeordneten Elemente auch transparent macht, aber die Hintergrundfarbe wirkt sich nur auf die Farbe aus ... oh, Sie bekommen es;)

0
jayenne

Ihre CSS sieht gut aus. Ich denke, das Problem ist, dass Ihre Bootstrap-Datei Ihren Code überschreibt ... Versuchen Sie dies, um den Code zu überschreiben, obwohl ich nicht die Verwendung von! Important vorschlage

.card-block { background-color: rgba(245, 245, 245, 0.4) !important; }

Siehe diesen Link für das Überschreiben. Es heißt Spezifität

0
Malcolm Vaz

Folgendes hat bei mir funktioniert (mit benutzerdefinierten Sass-Variablen, die ich erstellt habe), um Hintergrundfarben usw. im Akkordeon zu ändern:

::ng-deep div.card-header:hover {
background-color: var(--subtle-gray);
}

::ng-deep div.card-header a {
background-color: var(--accent);
text-decoration: none !important;
}

::ng-deep div.card-body {
background-color: var(--subtle-gray);
}
0
codeherlife