Changer opacité background-color sans changer opacité texte

TrachymanTr Messages postés 17 Date d'inscription dimanche 15 juillet 2018 Statut Membre Dernière intervention 29 avril 2024 - 29 avril 2024 à 14:23
jordane45 Messages postés 38222 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 juillet 2024 - 29 avril 2024 à 15:47

Bonjour,

Je viens ici car j'ai un petit problème. Pour un afficheur web, j'ai plusieurs divs dans la quart gauche de l'écran, défini pour des informations statiques. Dans ce dernier, j'aimerai que les background colors de la première div (date/heure) et la deuxième (éphéméride) puissent être réglés en opacité, sans impacté les autres éléments à l'intérieur de ces derniers.

Voici mon code css :
 

@font-face {
    font-family: "OpenSans";
    src: url('OpenSans-Regular.ttf');
}
@font-face {
    font-family: "MTCORSVA";
    src: url('MTCORSVA.ttf');
}

html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
}

.fete .titre {
    color:#525D5B;
    opacity: 1;
}


.gauche{
    float:left;
    position: absolute;
    z-index: 1;
    width: 25%;
    height: 100%;
    cursor: none
}

.date {
    height: 90px;
    margin: 15px;
    background-color: #f6f6f7;
    border-radius: 30px;
    text-align: center;
    font-family: OpenSans;
}



#jour {
    font-size: 1.7em;
    font-weight: bold;
    margin: 0;
}

#heure {
    font-weight:bolder;
    font-size: 1.5em;
    margin: 2%;
}

.fete {
    text-align: center;
    font-size: 2em;
    font-weight:bolder;
    height: 120px;
    background-color: #f6f6f7;
    border-radius: 30px;
    line-height: 60px;
    font-family: MTCORSVA;
    opacity: 0.5;
}


.citation {
    font-weight: bold;
    font-family: MTCORSVA;
    font-size: 1.7em;
    /*font-color: rgb(0,0,0);*/
}

.auteur {
    font-size: 1em;
}

a {
    text-decoration: none;
    color: black;
}

.source {
    display: none;
}

.droite{
    /*float:right;*/
    position: relative;
    width:75%;
    height: 99%;
    cursor: none;
}

.fluid_container {
    bottom: 0;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
}

.slide_container {
    bottom: 0;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
}

.bandeau {
    position: absolute;
    display: none;
    height: 80px;
    margin: 0 auto;
    bottom: 0;
    background-color: #b3b3b3; /*ffa724*/
    opacity: 0.85;
    width: 133%;
    line-height: 80px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: content-box;
    animation: marquee 40s linear infinite;
    z-index: 1;
}

.bandeau span {
    font-size: 2.5em;
    font-family: OpenSans;
}

@keyframes marquee {
    0%   { text-indent: 100% }
    100% { text-indent: -50% }
}

video#bgvid {
    position: fixed;
    right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    z-index: 100;
}

.carousel {
    margin-top: 90px;
    text-align: center;
    height: 100px;
    margin: 15px;
    background-color: #ffffff;
    border-radius: 90px;
    text-align: center;
    font-family: OpenSans;
}


#slider {
    position:relative;
    z-index: 0;


}

#img border{
    cursor: none;
}


#curseur{
    display: none;
}

Les divs en question sont : .date et .fete

Merci d'avance,

Tom.
Linux / Firefox 124.0

A voir également:

1 réponse

jordane45 Messages postés 38222 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 juillet 2024 4 683
29 avril 2024 à 15:47

Bonjour,

Remplace l'opacity par l'utilisation du background color en RGBA

par exemple :

background-color: rgba(0,0,255,0.5);

0