CSS background-image diaporama
Je suis assez nouveau dans le CSS et le HTML, mais je suis en train d'apprendre les ficelles du métier. Maintenant, j'ai une image de fond sur mon en-tête de l'article et je suis en train d'en faire un diaporama avec 3-4 images de brassage grâce à une minuterie.
J'ai vu quelques tutoriels qui utilisent des images par le biais de HTML, mais la façon dont j'ai mis c'est que j'ai ma propriété CSS background-image comme mon image.
Si cela ne fait pas sens, voici le CSS
.global-header {
min-height:600px;
background-image: url("Assets/BGImages/head_sandwichman.jpg");
background-size: cover;
text-align: center;
}
et le HTML
<header class="container global-header">
<div class="inner-w">
<div class='rmm' data-menu-style = "minimal">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="findus.html">FIND US</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</div>
<div class="large-logo-wrap">
<img src="Assets/Logos/Giadaslogoindexwhitebig.png" />
</div>
</div>
Merci pour l'aide!
- Utiliser les stackoverflow.com/questions/7777159/... avec @keyframes
window.setTimeout(function() { $('header.global-header').css('background-image', 'url(....)')});
, essentiellement- Pour tout ce que vous suggérant jQuery: jQuery réponse est hors-sujet pour cette question, parce que c'est un css question, et est étiqueté comme tel.
- Je suis désolé si j'ai été clair, mais la réponse n'a pas à être witin le domaine de la CSS. Je suis juste à la recherche d'une solution.
- pouvez vous s'il vous plaît prendre loin de votre -1 à partir de la pratique et de passer pour moi, c'était de ma faute.
- Ce n'est pas nécessaire, parce que c'est un CSS question, tout à fait possible avec CSS seul.
- Soupir... j'ai réalisé que je pouvais répondre moi-même... 😛
- Assez ironique de voir négativement marqué accepté de répondre...
- Il suffit d'éditer la question
InformationsquelleAutor user3342697 | 2014-03-10
Vous devez vous connecter pour publier un commentaire.
Utiliser à la suite de
fadeIn
ou l'augmentation de sa valeur... c'Est seulement mon problème?fadeIn
valeur.transition: background 1s linear;
, puis le transfert de travail (à l'aide de CSS3 qui est). Voir: stackoverflow.com/a/23166600/922323Apporté des modifications à cette réponse.
http://jsfiddle.net/qyVMj/
Bascially, juste faire de votre image dans un sprite (les combiner en 1 fichier), puis utilisez
left:
de cycle thru eux. (Bien sûr modifier la gauche et le pourcentage de valeurs à votre convenance)Basé sur la accepté de répondre à cette question, voici un jQuery-dépendante de la version qui crée une image aléatoire diaporama, utilise CSS3 pour la transition et obtient les chemins de l'image via HTML5
data
attribut.Démo: https://jsbin.com/luhawu/1
Remarque: Toutes les images doivent être de mêmes dimensions pour de meilleurs résultats.
JS:
Minifiés:
CSS:
HTML
J'ai aussi placez le code dans le public Gist.