Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore le Dim 21 Fév 2016 - 1:53

Code:
<style>
body{
background-position:center bottom;
background-size: cover;
background-color: #000000;
background-image: url(http://i84.servimg.com/u/f84/18/73/48/08/blason11.png), url(http://i84.servimg.com/u/f84/18/73/48/08/sceau10.png);
background-repeat: no-repeat, no-reapeat;
}</style>

Coucou, j'ai besoin d'aide pour faire clignoter en fondu une image (le blason vert et jaune) dans une page html vierge et que cette image se positionne correctement par rapport au background (jardin).

J'ai essayé plusieurs choses mais je n'arrive pas.

Merci par avance.

Wink

Édition :

Je pense faire une image animée si la première idée ne trouve pas de solution seulement j'ai besoin de savoir comment faire pour superposer une image sur le background et qu'à toutes les résolutions l'image suit le même mouvement car je ne sais pas faire les images animées en fond transparent.


Dernière édition par Guilde-Egregore le Jeu 25 Fév 2016 - 15:32, édité 1 fois

Guilde-Egregore
***

Masculin
Messages : 171
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore le Lun 22 Fév 2016 - 8:53

Coucou !

Up

Very Happy

Guilde-Egregore
***

Masculin
Messages : 171
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore le Mar 23 Fév 2016 - 8:48

J'ai trouvé un code pour faire clignoter l'image mais problème il ne fonctionne pas sur une page html qui ne contient pas le haut et le bas du forum (alors qu'il fonctionne sur les autres pages).

Aussi j'ai pensé à un moyen pour centrer l'image par rapport au background qui est la marge mais ça ne fonctionne pas bien car mon background est en cover et positionné center bottom.

Je souhaite vraiment trouver. Wink


Guilde-Egregore
***

Masculin
Messages : 171
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore le Mer 24 Fév 2016 - 13:06

Coucou !

Si vous ne comprenez pas ma demande je peux réexpliquer ? :/

Guilde-Egregore
***

Masculin
Messages : 171
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Scoubifitz le Jeu 25 Fév 2016 - 2:50

Bonsoir,

La page ne doit comporter qu'une image de fond et une image clignotante
Les deux doivent s'adapter à la résolution de l'écran ... c'est ça ?

Code:
<!DOCTYPE html>
<html>
<head>
<style>
body{
    background-position:center;
    background-size: cover;
    background-color: #000000;
    background-image: url(http://i84.servimg.com/u/f84/18/73/48/08/sceau10.png);
    background-repeat: no-repeat;
    }
img{
  width:100%;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite; color: red;
}

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}
</style>
</head>
<body>
<img src="http://i84.servimg.com/u/f84/18/73/48/08/blason11.png" />
</body>
</html>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore le Jeu 25 Fév 2016 - 9:27

Exactement ! Dans le mille merci ça va beaucoup m'aider pour la suite ! Smile

Je pensais à quelque chose sans barre de défilement verticale avec le background "center center" mais je ne vais pas être trop exigent non plus ! Et puis j'ignore si c'est possible !

J'ai trouvé le moyen d'ajouter un icon dans l'onglet mais pas le titre avec vous une idée ?

Merci à vous pour votre aide ! Smile

Guilde-Egregore
***

Masculin
Messages : 171
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Scoubifitz le Jeu 25 Fév 2016 - 14:30

En plaçant des balises title entre les balises head ...

Code:
<!DOCTYPE html>
<html>
<head>
<title>Lieu du Blason</title>
<link type="image/x-icon" rel="shortcut icon" href="http://i18.servimg.com/u/f18/18/73/48/08/110_1110.png" />
<style>
body{
    background-position:center center;
    background-size: cover;
    background-color: #000000;
    background-image: url(http://i84.servimg.com/u/f84/18/73/48/08/sceau10.png);
    background-repeat: no-repeat;
    }
img{
  width:100%;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite; color: red;
}
 
@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}
 
@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}
 
@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0; }
    100% { opacity: 1.0; }
}
</style>
</head>
<body>
<img src="http://i84.servimg.com/u/f84/18/73/48/08/blason11.png" />
</body>
</html>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire clignoter en fondu une image dans une page html vierge et qui se positionne correctement par rapport au background

Message par Guilde-Egregore le Jeu 25 Fév 2016 - 15:31

Merci à vous Scoubifitz cela me convient ! Smile

Bon après-midi !

Guilde-Egregore
***

Masculin
Messages : 171
Inscrit(e) le : 26/05/2014

http://geleconnexion.guildmmorpg.com
Guilde-Egregore a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum