Hola solo tengo una simple Tarjeta de Bootstrap 4 componente.

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

Lo que yo quería hacer era tener el encabezado y pie de página con una opacidad de 1, pero el bloque con una opacidad de .4. Traté de usar rbga en el color de fondo de estilo sin suerte

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

7 Comentarios

  1. 8

    has intentado usar opacidad

    CSS:

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

    HTML:

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

    • si la respuesta es útil y que satisface sus necesidades por favor, acepte.
    • Este es el trabajo para cambiar la opacidad del texto, el fondo es todavía un sólido blanco, heredado de la .tarjeta div padre
    • modificar el background-color: rgba(245, 245, 245, 1); para ajustar como sea necesario.
  2. 2

    Resulta el bootstrap clase .tarjeta de fue primordial la opacidad del fondo de pantalla de estilo css que yo estaba tratando de establecer en .tarjeta de bloque independientemente de si puedo poner !palabra clave importante o no.

    Yo era capaz de arreglar esto añadiendo el estilo de fondo a la tarjeta y solo cambiando el individuo opacidades de la .tarjeta-encabezado y .tarjeta de pie de página a 1.

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

    por favor, intente esto:

    <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>
    • PERFECTO! Esto era exactamente lo que estaba buscando!
  4. 1

    Tu css se ve bien. Creo que el problema es el arranque de archivo es reemplazar el código.
    Prueba esto para reemplazar el código aunque no me voy a sugerir el uso de !importante

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

    Se refieren a en este enlace para el primordial. Su llamado especificidad

  5. 0

    opacidad es diferente a la de color de fondo
    la opacidad se establece la translucidez del elemento y el color de fondo se establece sólo para el color de fondo.

    Esto puede sonar similar pero son muy diferentes.

    La gran diff es que la opacidad hará que el texto y las imágenes y los elementos secundarios también transplucent pero el color de fondo sólo afectarán a los col…oh, usted lo consigue 😉

    • Por favor, añadir un poco de código para que otros usuarios puedan probar lo que estás describiendo. Gracias!
  6. 0

    Pruebe este enfoque

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

    Cómo cambiar la opacidad de una tarjeta de bloque de inicio 4

  7. -1

    Aquí es lo que ha trabajado conmigo (el uso personalizado de sass variables que he creado) para modificar los colores de fondo, etc dentro de las acordeón:

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

Dejar respuesta

Please enter your comment!
Please enter your name here