Aplat transparent sur texte

**soeursourire** · 19/07/2018, 14h34

Bonjour,

J'ai fait un aplat de couleur transparente sur un texte mais cela marche très bien sur Chrome mais pas sous IE.

Les deux lignes ne sont pas alignées à droite et il y a des traits autour de mon texte sous IE.

Comment puis-je le résoudre?

https://codepen.io/JARLIER/pen/QBKeee

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div>
  <h1>
    <span class="wrap">
      <span class="inner">
        Titre sur<br>
        deux lignes
      </span>
    </span><br></h1>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body {
  background:blue;  
}
 
div {
width: 50%;
  height: 400px;
  position: absolute;
  top: 100px !important;
  right: calc(((100vw - 980px) / 2) + 50px );
  height: 200px;
  text-align: right;
}
 
h1 {
  font-size: 1.5rem !important;
    line-height: 1.92!important;
}
 
.wrap {
  box-shadow: 0px 0 0px 0px white, 0px 0 0px 0.5rem rgba(255,255,255,0.5);
}
 
.inner{
  position: relative;
    background: rgba(255,255,255,0.5);
}

Merci pour votre aide.

Invité · 19/07/2018, 15h38

Bonjour,

pourquoi faire si compliqué ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div>
  <h1 class="wrap">Titre sur<br />deux lignes</h1>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
h1.wrap {
  display:inline-block;
  font-size: 1.5rem !important;
  line-height: 1.92rem !important;
  box-shadow: 0px 0 0px 0px white, 0px 0 0px 0.5rem rgba(255,255,255,0.5);
  background-color: rgba(255,255,255,0.5);
}

**soeursourire** · 19/07/2018, 16h44

Merci.

Parce que je dois avoir les aplats de couleurs qui s'ajuste à la longueur de chaque ligne.. J'ai testé votre code et ça me donne un bloc: https://codepen.io/JARLIER/pen/QBKeee
Or on me demande d'ajuster les aplats aux textes... :-(

Invité · 19/07/2018, 17h16

1- "ajuster" à quoi ? Et de quelle façon ?

2- A quoi sert box-shadow ici ?

**soeursourire** · 20/07/2018, 09h07

Je ne sais pas j'avais retrouvé un code qui améliorer le rendu avec ce box-shadow. L'applat doit s'ajuster à la longueur du texte sur chaque ligne. Mon code marche sous Chrome mais pas sous IE

Invité · 20/07/2018, 09h34

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div>
  <h1>
    <span>Titre sur</span>
    <br />
    <span>deux lignes</span>
  </h1>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
h1 {
  font-size: 1.5rem !important;
  text-align:right;
}
 
h1 > span {
  display:inline-block;
  background: rgba(255,255,255,0.5);
  padding:5px;
}