html - comment faire des images de rester sur certaine partie de l'arrière-plan

J'ai une image de fond avec la taille dans le CSS de couverture, de sorte qu'il redimensionne la fenêtre du navigateur est redimensionnée. mais quand je place les images, comment les positionner de sorte qu'ils restent dans un certain lieu, conformément à l'arrière-plan? j'ai essayé d'utiliser à gauche:...px et haut:...px et je sais pourquoi ça ne fonctionne pas, parce que quand j'ai redimensionner la fenêtre, il va rester à cette position en dehors de la gauche, et en haut, mais quelle est la solution? je veux les images à redimensionner proportionnellement à la taille de la fenêtre/arrière-plan est et de rester dans une certaine position sur le fond

  • vous devrez peut-être utiliser des pourcentages plutôt que de px
  • comment pourrais-je le faire tout en étant capable de conserver les images dans le même endroit par rapport à l'arrière-plan
InformationsquelleAutor LotaMaster | 2013-04-17
  1. 2

    utiliser le positionnement absolu avec %s'

    HTML:

    <div id="foo"></div>

    CSS:

    #foo{
    position:absolute;
    top:10%;
    left:20%;
}

    De la position que vous pouvez utiliser absolu, fixe, ou relative selon quelles suites le mieux.

    Fixe: par rapport à la fenêtre du navigateur;

    Relative: relative à la position naturelle

    Absolue: par rapport à la première positionné ancêtre

    • en fait maintenant, quand je redimensionner la fenêtre à gauche et à droite, les images redimensionner, mais ils ne restent pas dans le même endroit par rapport à l'arrière-plan...
    • Pourriez-vous créer un JSfiddle de la marque et CSS? Donc, je peux essayer d'aider de plus en plus. Créer ici jsfiddle.net
    InformationsquelleAutor Chris_W
  2. 2

    Si vous souhaitez que l'image d'arrière-plan pour redimensionner mais gardez un élément particulier dans la même position verticale, une façon de le faire est d'utiliser le calc() la fonction à l'intérieur de la propriété background-position avec background-size 100%.

    Par exemple:

    background-image: url('your image');
background-position: top calc(200px - 20vw) right;
background-attachment: fixed;
background-size: 100%;
background-repeat: no-repeat;

    Que l'image s'agrandit l'élément à l'intérieur de l'image que vous souhaitez conserver dans la même position verticale va naturellement s'agrandir et déplacer vers le bas. Le négatif de la fenêtre d'affichage de la valeur à l'intérieur du calcul de la compensation verticale vers le bas, le mouvement tandis que la première valeur indique les éléments en position verticale. Ajuster les valeurs à l'intérieur de la calc() fonction jusqu'à ce que vous êtes satisfait avec les résultats.

    InformationsquelleAutor Alex Boukin
  3. 0

    Je ne comprends pas vraiment votre problème (peut-être que vous devriez essayer de mettre quelques codes ou créer un jsfiddle).

    Cependant, je pense que vous devriez jeter un coup d'oeil à l'css3 background-size propriété.

    Je suppose que cet exemple du W3C est ce que vous avez besoin.

    InformationsquelleAutor Oliboy50