Débordement d'une image dans un élément HTML

Question

Débordement d'une image dans un élément HTML

Demandé el 14 de Mai, 2016: Quand la question a-t-elle été
1418 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Chrome et d'autres navigateurs disposent de l'overscroll (également appelé scroll élastique ou rubber band scroll) pour l'affichage de l'écran. html élément. (Voir aquí o aquí .)

Je veux une image dans le html overscroll comme un œuf de Pâques, un peu comme le Slack pour iOS œuf de Pâques. (Voir "Vous êtes à jour." dans la capture d'écran).

Le CSS

html {
    background: green;
}

donne une couleur au débordement. Une image ne fonctionne pas :

html {
    background: url(image.png);
}

Comment mettre une image dans le html débordement ?

Demandé el 14 de Mai, 2016 par Randomblue

0 votes

Pouvez-vous fournir un fiddle pour l'exemple ci-dessus

Commenté el 30 de Mai, 2016 par Sudarshan Kalebere

1 votes

L'exemple de Slack est une application native iOS.

Commenté el 30 de Mai, 2016 par Randomblue

0 votes

Non, pouvez-vous simplement fournir un code html avec un exemple d'image, comme vous le demandez à d'autres ? pour que je puisse essayer là-bas, merci.

Commenté el 30 de Mai, 2016 par Sudarshan Kalebere

Answer 1

5 Réponses

Answer 2

12voto

Everettss Points 7229

Vous pouvez obtenir ce résultat sur Safari (Je n'ai pas réussi à obtenir ce résultat avec d'autres navigateurs).

HTML

<html>
  <body>
    <div class="body-wrapper">
      Content goes here
    </div>
  </body>
</html>

CSS

/* --- Reset rubber effect on the 'html' tag --- */
html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}
/* ------------ end reset ------------ */

html {
    background-color: white;
    background-image: url("http://www.freebordersandclipart.com/images/EasterEggThree.png");
    background-repeat: no-repeat;
    background-size: 6%;
    background-attachment: fixed;
    background-position: 50% 10px;
}

.body-wrapper {
    background-color: white;
}

Vous devez supprimer l'effet de caoutchouc par défaut sur les html (puisqu'il est impossible de placer un graphique sur l'élément html l'élément parent - il n'y a pas de html parent). body a un effet de caoutchouc et un fond transparent - l'absence de fond est importante car l'effet de caoutchouc étend cette couleur et peut chevaucher le graphique de l'œuf de Pâques. .body-wrapper a une couleur de fond pour cacher l'œuf de Pâques.

Ici vous pouvez voir l'effet (sur le bureau, cela ne fonctionne que sur Safari).

Répondu el 23 de Mai, 2016 par Everettss (7229 Points )

4 votes

Félicitations pour l'avoir mis sur Safari !

Commenté el 23 de Mai, 2016 par Randomblue

0 votes

Background-attachment : fixed ; permettait de faire fonctionner le site dans les anciennes versions de chrome et/ou firefox ainsi que dans safari. L'effet a été supprimé il y a un certain temps. où même l'arrière-plan html défile lors du "rubber-banding".

Commenté el 25 de Mai, 2016 par Utilisateur non enregistré

0 votes

Ceci peut être facilement réalisé dans N'IMPORTE QUEL navigateur, en utilisant iScroll : stackoverflow.com/a/37734326/2397550

Commenté el 9 de Juin, 2016 par JoostS

Answer 3

5voto

JoostS Points 5425

Il existe un multi-navigateurs Une solution conviviale que tout développeur de front-end devrait connaître : iScroll de Matteo Spinelli ( http://cubiq.org/iscroll-5 ).

Il a créé une simulation multi-navigateurs de l'effet élastique, qui est entièrement stylisable. iScroll peut être utilisé à cette fin (ainsi que de nombreuses autres). Personnellement, je l'utilise surtout pour créer des débordements sur les divs dans les appareils mobiles, car ils ne sont normalement pas autorisés.

Voici un oeuf de Pâques à l'ancienne qui utilise une image d'arrière-plan sur l'écran de l'ordinateur. #wrapper : http://codepen.io/anon/pen/OXMmgr ... JIPPY....JIPPY JIPPY JIPPY !

PS. Si vous voulez quelque chose qui fonctionne sur le défilement "normal" de la molette, essayez ce dépôt : https://github.com/ftlabs/ftscroller

Répondu el 9 de Juin, 2016 par JoostS (5425 Points )

1 votes

Je suis sur Chrome pour Mac et votre codepen ne fonctionne pas pour moi.

Commenté el 10 de Juin, 2016 par Randomblue

0 votes

Essayez la démo originale... :-)

Commenté el 10 de Juin, 2016 par JoostS

1 votes

Si vous faites référence à lab.cubiq.org/iscroll5/demos/simple alors cela ne fonctionne pas non plus.

Commenté el 10 de Juin, 2016 par Randomblue

Afficher 7 autres commentaires

Answer 4

2voto

Vishnu S Babu Points 354

Essayez ceci, cela pourrait résoudre votre problème (y)

html {
    background: url(image.png);
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

Répondu el 26 de Mai, 2016 par Vishnu S Babu (354 Points )

1 votes

Cela ne fonctionne pas pour moi. Pouvez-vous nous donner un exemple concret ? Quel navigateur utilisez-vous ?

Commenté el 30 de Mai, 2016 par Randomblue

1 votes

@VishnuSBabu Si j'appuie sur Exécuter l'extrait de code dans Chrome, rien ne se passe.

Commenté el 13 de Juin, 2016 par Karlo

Answer 5

1voto

Sampada Points 2339

Ça pourrait marcher, ça a marché pour moi :

body {
    background: white;
    height: 100%;
    overflow: auto;
}

html {
    overflow: hidden;
    height: 100%;
    background: url("http://www.planwallpaper.com/static/images/background-wallpapers-26.jpg");
}

Répondu el 30 de Mai, 2016 par Sampada (2339 Points )

2 votes

Quel navigateur utilisez-vous ? Pouvez-vous fournir un exemple concret ?

Commenté el 30 de Mai, 2016 par Randomblue

0 votes

Firefox. J'ai également essayé avec Chrome avec succès. Je n'ai pas vraiment d'exemple concret, mais voici un bricolage jsfiddle.net/sampada07/w9t0d3uj

Commenté el 30 de Mai, 2016 par Sampada

2 votes

J'utilise Chrome sur Mac OS X et cela ne fonctionne pas pour moi. J'ai également essayé Firefox et cela ne fonctionne pas pour moi.

Commenté el 30 de Mai, 2016 par Randomblue

Answer 6

0voto

Taurus Points 147

Vous devriez peut-être essayer ceci :

html {
   background-color: 'yourcolor';
}

html {
   background-image: 'your image';
}

parce que lorsque vous, utilisez background property vous êtes écrasement ce que vous avez écrit précédemment. Cela donnera valeur par défaut presque pour tous les background properties . Ce serait un moyen facile de définir votre background-image y background-color séparément, mais pour d'autres comportements comme repeat , position , attachment y etc Si vous avez des questions, veuillez laisser un commentaire pour que je sache quel est votre autre problème.

Deuxième partie

J'ai construit ce stylo pour vous, -> http://codepen.io/CodeHero/pen/PzZdZW Eh bien, j'ai construit une boîte là-dedans et je lui ai donné quelques background property et a tout écrasé en utilisant background : blue; .

Il s'agit d'un échantillon simple, mais vous pouvez vous en assurer en suivant les étapes suivantes. Vous pouvez faire un clic droit sur la boîte bleue et a choisi le option inspect element et un menu d'inspection s'ouvrira pour vous, dans lequel vous pourrez voir l'écran suivant css sur le côté droit de celui-ci, et si vous regardez de près, vous pouvez voir qu'il a croisé une ligne sur la première partie de l'image. css selector property et c'est parce que j'ai utilisé background au lieu de background-color .

Répondu el 9 de Juin, 2016 par Taurus (147 Points )

1 votes

Pouvez-vous afficher une preuve de concept ?

Commenté el 10 de Juin, 2016 par Randomblue

0 votes

@Randomblue J'espère que la deuxième partie sera utile.

Commenté el 10 de Juin, 2016 par Taurus

0 votes

Votre preuve de concept ne fonctionne pas pour moi sur Chrome pour Mac OS X.

Commenté el 13 de Juin, 2016 par Randomblue

Afficher 1 autres commentaires

Débordement d'une image dans un élément HTML

Réponses

HTML

CSS

Deuxième partie

Questions en vedette

Top Tags

Prograide.com

Powered by:

Débordement d'une image dans un élément HTML

Réponses

HTML

CSS

Deuxième partie

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: