27219 sujets

CSS et mise en forme, CSS3

Bonjour/Bonsoir,
brève explication du contexte : je réalise un site web et je souhaite créer un parallaxe dans une image. L'image étant un texte.
Je me demandais donc si c'était possible de faire en sorte que le background-image d'une <div> apparaisse seulement dans <img> contenu dans cette <div>.
(ça fait plusieurs heures que je fouille des sites)


<div id="parallaxe">
			<div class="inside">
				<img id="imgbglesvikings" src="<?php echo get_template_directory_uri()?>/images/lesvikingsb.png" alt="lesvikings" width="70%">
			</div>
		</div>



#parallaxe{
	background-image: url(images/Sea-NVG.jpg);
	height: 100%; 
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#parallaxe .inside img{   
	opacity: 0.1;
}

Modifié par Kuroe (14 Feb 2020 - 05:32)
Administrateur
Bonjour,

tu peux regarder du côté de overflow: hidden ou clip-path mais je n'ai pas de solution toute faite, c'est juste des pistes Smiley smile
J'ai tout essayé avec le clip-path et rien n'y fait j'ai meme testé en svg rien n'y fait aussi.
pour le overflow:hidden faudrait que le parallaxe sois à l'intérieur de l'image et je ne vois pas comment faire ça.
J'ai réfléchis du coté du découpage de background mais google ne m'a pas donné de réponse qui se rapproche de ma problématique Smiley ohwell
Modifié par Kuroe (14 Feb 2020 - 19:29)