Création de bandes transparentes

Version imprimable

28/05/2020, 13h58
titi_la_vermine

Création de bandes transparentes

Bonjour à tous,

Sur ma page WEB d'accueil ( HTML\CSS), j'ai une image en fond d'écran (appelée directement en HTML) et je souhaiterais positionner deux bandes transparentes ( verticales ) à l’extrême gauche et à l'extrême droite.

Auriez-vous des exemples de code à partager ?

Bonne journée

Thierry
28/05/2020, 16h06
NoSmoking

Bonjour,
pourquoi vouloir des bandes verticales transparentes de chaque côté, elles ne seront donc pas visibles donc tu peux considérer qu'elles y sont déjà :mrgreen:

Plus sérieusement explique nous la finalité les solutions étant multiples !
28/05/2020, 16h32
titi_la_vermine

Bandes transparentes

Oui tu as raison, je voulais dire ajouter des bandes verticales type filtre avec un valeur d'opacité qui permettrait tout de même de voir l'image fond d'écran
Amicalement

Dans le code de mon Notepad++, j'ai ceci :

Code:

1
2
3
4
<div class="testbande">
            <p>test bandeaugauche</p>            
 
         </div>

Dans le .css, j'ai codé ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.testbande { 
    position: absolute;
    top: 0;
    left: 0;   
    background-color: pink;
    display: block;
    border:none;
    padding: 0;
    margin:0;
    float: right;
     width:860px;
     height: 800px; 
    opacity: 0.2;
 
}

Par contre, quand j'enleve <p>test bandeaugauche</p> de mon code html, le bandeau ne s'affiche plus. Avez-vous une idée du pb ?
Amicalement

28/05/2020, 18h52
NoSmoking

Il n'y a aucune raison que la bande ne soit plus visible, même si certaines propriétés ne te servent à rien comme float:right !

Il doit y avoir autre chose dans ton code qui coince.
29/05/2020, 15h45
titi_la_vermine

merci pour ton aide,
J'ai juste mis mes bandes de le même div que l'image de fond et cela fonctionne.
Merci pour ton aide
A plus