Fond de h1 devrait chevaucher l'image

actuellement j'ai quelques problèmes avec Css sur un petit site Web. Je souhaite afficher une image et avoir un texte (h1) qui chevauche la moitié de l'image. Mais je veux aussi que le texte soit dans une boîte blanche. corrently j "ai résolu ce problème qui l'arrière-plan-tag, mais l'image chevauche h1-fond.Fond de h1 devrait chevaucher l'image

|~~~~~~~~~~~~~~~~~~ 
| image   | 
|   ______|____________________________ 
|   | This is the Text, with background | 
|   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
|     | 
|~~~~~~~~~~~~~~~~~~

je l'espère, vous comprenez ce que je veux faire ... Je suis reconnaissant pour tous les conseils !

Source

2017-09-01 Tim

Pouvez-vous fournir un jsFiddle ou similaire à reproduire ton problème? Merci –

S'il vous plaît inclure votre code HTML et CSS. –

http://learnlayout.com – Amit

J'ai fait un exemple simple de la façon dont cela pourrait fonctionner

Html

<img src="https://via.placeholder.com/100x100"/> 
<h1> 
This is the H1 text 
</h1>

CSS

img{ 
    float:left; 
} 
h1{ 
    float:left; 
    margin-left:-20px; 
    background:white; 
}

Fiddle Lien: https://jsfiddle.net/1b4kx9vd/

Source

2017-09-01 09:13:17 wheeler

c'était la chose dont j'avais besoin. Maintenant, je suis en train de l'ajuster pour les sites mobiles! Merci beaucoup! – Tim

vous pouvez changer l'élément de boîte avec le h1 à une position absolue, choisir une position que vous êtes satisfait et un conteneur div autour de tous les éléments qui est une position par rapport à tout garder intact pour la réactivité.

<div style='position: relative;'> 
    <img src='images/example.jpg'> 
    <div style='position: absolute; top: 20px; left: 0px;'> 
    <h1>Example Text</h1> 
    </div> 
</div>

Il suffit de changer les styles pour vos perfences

Source

2017-09-01 09:08:49 Sadie

Vous pouvez mettre la position: absolue; haut: 100px; et à gauche: 100px; en css sur votre tag h1.

Source

2017-09-01 09:09:35

Fond de h1 devrait chevaucher l'image

Répondre

Questions connexes