国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Comment placer du texte sur une image en utilisant CSS
P粉696605833
P粉696605833 2023-08-23 17:18:53
0
2
586
<p>Comment placer du texte sur une image en CSS?? </p> <pre class="brush:php;toolbar:false;"><div class="image"> <img src="sample.png"/> <div class="text"> <h2>Du texte</h2> </div> </div></pre> <p>Je veux faire quelque chose comme ci-dessous mais je suis bloqué, voici mon css</p> <pre class="brush:php;toolbar:false;"><style> .image { position : relative ; } h2 { position : absolue ; haut?: 200?px?; gauche : 0 ; largeur : 100 % ; marge : 0 automatique ; largeur?: 300?px?; hauteur : 50px ; } </style></pre> <p>Je n'obtiens aucun résultat de html2pdf lorsque j'utilise une image d'arrière-plan?: </p> <pre class="brush:php;toolbar:false;"><style> #image_conteneur{ largeur?: 1?000?px?; hauteur : 700px ; image d'arrière-plan:url('switch.png'); } </style> <a href="prints.php">Imprimer</a> <?php ob_start(); ?> <div id="image_container"></div> <?php $_SESSION['sess'] = ob_get_contents(); ob_flush(); ?>≪/pré> <p>Voici prints.php?: </p> <pre class="brush:php;toolbar:false;"><?php require_once('html2pdf/html2pdf.class.php' ?> <?php $html2pdf = nouveau HTML2PDF('L', 'A4', 'en'); $html2pdf->writeHTML($_SESSION['sess']); $html2pdf->Sortie('random.pdf'); ?>≪/pré> <p><br /></p>
P粉696605833
P粉696605833

répondre à tous(2)
P粉041856955

Voici une autre fa?on d’utiliser les dimensions réactives. Il gardera votre texte centré et maintiendra sa position dans le parent. Si vous ne souhaitez pas qu'il soit centré, c'est encore plus simple, utilisez simplement absolute 參數(shù)即可。請(qǐng)記住,主容器正在使用 display: inline-block. Il existe de nombreuses autres fa?ons d'y parvenir, en fonction de ce avec quoi vous travaillez.

Basé sur centré sur l'inconnu

Voici un exemple de codepen fonctionnel

HTML

<div class="containerBox">
    <div class="text-box">
        <h4>Your Text is responsive and centered</h4>
    </div>
    <img class="img-responsive" src="http://placehold.it/900x100"/>
</div>

CSS

.containerBox {
   position: relative;
   display: inline-block;
}
.text-box {
   position: absolute;
   height: 100%;
   text-align: center;    
   width: 100%;
}
.text-box:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
h4 {
   display: inline-block;
   font-size: 20px; /*or whatever you want*/
   color: #FFF;   
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
P粉349222772

Que diriez-vous de quelque chose comme ?a?: http://jsfiddle.net/EgLKV/3/

Fait en pla?ant du texte sur l'image en utilisant position:absolutez-index.

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}
<div id="container">
  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Hello World!
  </p>
</div>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal