So ändern Sie die Deckkraft der Karte-block-bootstrap 4

Hey ich habe nur eine einfache Karte 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, sondern der block mit einer Deckkraft .4. Ich habe versucht, rbga in der hintergrund-Farbe, - Stil mit kein Glück

.card-block { background-color: rgba(245, 245, 245, 0.4); }
haben Sie versucht, mit opacity
Würde es dein problem lösen zu gehen, für "bg transparent" wie bereits erwähnt auf den link oben; getbootstrap.com/docs/4.1/utilities/colors

InformationsquelleAutor Luke Flournoy | 2017-02-24

  1. 2

    Herausstellt, dass der bootstrap-Klasse .Karte übersteuerte die background opacity css-style-ich war versucht, auf .Karte-block unabhängig davon, ob ich mich setzen !wichtiges Stichwort ist oder nicht.

    Konnte ich beheben Sie dies, indem Sie den Hintergrundstil auf der Karte und ändern Sie einfach den einzelnen Trübung der .Karte-Kopf - und .Karte-Fußzeile zu 1.

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

    InformationsquelleAutor Luke Flournoy

  2. 1

    Deine css sieht ok. Ich denke, das Problem ist der bootstrap Datei zu überschreiben, code aus.
    Versuchen Sie, diese zu überschreiben Sie den code obwohl ich nicht empfehlen !wichtig

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

    Finden dieser link für das überschreiben. Die genannte Spezifität

    InformationsquelleAutor Malcolm Vaz

  3. 1

    bitte, versuchen Sie dies:

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

    InformationsquelleAutor Jorge Opazo

  4. 0

    Deckkraft ist anders, der hintergrund-Farbe
    die Deckkraft wird die Transparenz der element-und hintergrund-Farbe wird es nur für th Farbe des Hintergrundes.

    Das klingt ähnlich, aber Sie sind sehr unterschiedlich.

    Der große Unterschied ist, dass die Deckkraft macht den text adn-Bilder-und-Kind-Elemente auch transplucent aber die hintergrund-Farbe wird nur auf die col...oh, du bekommst es 😉

    Bitte fügen Sie einige code, so dass andere Benutzer können testen, was Sie beschreiben. Danke!

    InformationsquelleAutor jayenne

  5. 0

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

    So ändern Sie die Deckkraft der Karte-block-bootstrap 4

    InformationsquelleAutor Developer

  6. -1

    Hier ist, was die mit mir gearbeitet hat (mit benutzerdefinierten sass Variablen, die ich erstellt haben) zu ändern, hintergrund, Farben, etc. innerhalb des Akkordeon:

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

    InformationsquelleAutor codeherlife

Schreibe einen Kommentar