Je suis sur le point de m'arracher les cheveux sur celui-ci.

J'ai une bande horizontale composée de divs différents. Leur largeur est définie par un pourcentage de la largeur totale de la bande (qui est inconnue)

Par exemple:

---------------------------------
|     |     |            |      |
---------------------------------
0%   20%   40%          80%    100%

Maintenant, je veux avoir une image d'arrière-plan qui s'étend essentiellement sur toute la bande, mais je dois les définir individuellement sur chaque div, car ils peuvent avoir différentes variations en fonction de la div.

Ainsi, le premier div (0% - 20%) aurait un background-width de 500% et un background-position de (0, 0)

Le second (20% - 40%) aurait également un background-width de 500% et un background-position de (25%, 0) (nous en reparlerons plus tard)

Le troisième (40% - 80%) aurait un background-width de 250% et un background-position de (~ 66,66%, 0)

Le dernier (80% -100%) aurait à nouveau un background-width de 500% et un background-position de (100%, 0)

Maintenant, cela peut sembler un problème vraiment stupide, mais je ne peux tout simplement pas comprendre comment calculer les valeurs correctes pour le background-positions en fonction de la largeur div et de la position sur la bande, même si je pense comprendre à peu près comment fonctionne le positionnement en pourcentage. J'apprécierais vraiment que quelqu'un me pointe dans la bonne direction.

Edit: Après quelques gribouillages, je pense que je l'ai compris, mais je ne le publie pas encore comme réponse parce que mon cerveau est trop frit pour même comprendre le raisonnement derrière cela. Peut-être que quelqu'un prendra le temps d'expliquer pourquoi cela fonctionne. Je vais certainement essayer après avoir dormi. Je suis capable de calculer les valeurs correctes comme ceci:

background_position_x = div_strip_position_x + div_width * div_strip_position_x / (100 - div_width)

(Toutes les variables sont en pourcentages)

2
cwry 21 avril 2017 à 03:46

3 réponses

Meilleure réponse

Lorsque vous utilisez des pourcentages en position d'arrière-plan:

La taille de la zone de positionnement d'arrière-plan moins la taille de l'image d'arrière-plan; la taille fait référence à la largeur des décalages horizontaux et à la hauteur des décalages verticaux

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

.container {
  position: relative;
  display: block;
  width: 100%;
  font-size: 0;
}

.container>div {
  display: inline-block;
  height: 200px;
  background-repeat: no-repeat;
}

.container#example1>div {
  width: 50%;
  background-size: 200% 100%;
}

.container#example2>div {
  width: 33.33%;
  background-size: 300% 100%;
}

.container#example3>div {
  width: 25%;
  background-size: 400% 100%;
}

#example1 #d1 {
  background-image: url(http://placehold.it/500x400/333333/000000);
  background-position: 0% 0;
}

#example1 #d2 {
  background-image: url(http://placehold.it/500x400/666666/000000);
  background-position: 100% 0;
}

#example2 #d1 {
  background-image: url(http://placehold.it/50x400/333333/000000);
  background-position: 0% 0;
}

#example2 #d2 {
  background-image: url(http://placehold.it/50x400/666666/000000);
  background-position: 50% 0;
}

#example2 #d3 {
  background-image: url(http://placehold.it/50x400/999999/000000);
  background-position: 100% 0;
}

#example3 #d1 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 0% 0;
}

#example3 #d2 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 33.33% 0;
}

#example3 #d3 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 66.66% 0;
}

#example3 #d4 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 100% 0;
}
<div id="example1" class="container">
  <div id="d1"></div>
  <div id="d2"></div>
</div>

<hr>

<div id="example2" class="container">
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</div>

<hr>

<div id="example3" class="container">
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
  <div id="d4"></div>
</div>

Regardons exemple3.

Le moyen le plus "simple" de déterminer ce qu'il faut utiliser pour background-position avec chaque segment est ...

100% / (segmentID * (numberOfSegments -1))

Donc, dans ce cas, nous voulons 4 segments au total .

  1. 100% / (0 * (4-1)) == 0%
  2. 100% / (1 * (4-1)) == 33.33%
  3. 100% / (2 * (4-1)) == 66.66%
  4. 100% / (3 * (4-1)) == 100%

Notez que cela ne fonctionnera que lorsque background-size: width == numberOfSegments * 100%.

2
Zze 21 avril 2017 à 04:10

1- Enveloppez-les dans une division parent. 2- Faire leurs affichages "inline-block" et vertical-align "middle". 3- Appliquer l'image de fond à tous. 4- Définissez la taille et la position de l'arrière-plan pour chacun individuellement.

.row-1{
  display:block;
  font-size:0;
}
.row-1 > div{
text-align:center;
height:20px;
display:inline-block;
vertical-align:middle;
background: url('http://www.imagestowallpapers.com/wp-content/uploads/2015/12/Background-Image-CSS4.jpg') no-repeat center center fixed;
    background-size: cover;
}
.w20{
   width:20%;
   background-color:red;
   font-size:13px
}
.w40{
   width:40%;
   font-size:13px;
}
.w20.first{
    background-position:0 0;
    background-size: 500%;
}
.w20.second{
   background-position:25% 0;
   background-size: 500%;
}
.w20.third{
   background-position:66.66% 0;
   background-size: 250%;
}
.w20.forth{
   background-position:100% 0;
   background-size: 500%;
}
<div class="row-1">
  <div class="w20 first">1</div>
  <div class="w20 second">2</div>
  <div class="w40 third">3</div>
  <div class="w20 forth">4</div>
</div>
0
Amir H. Bagheri 21 avril 2017 à 02:15

Autant que je sache, le positionnement en arrière-plan est relatif à la div elle-même, pas à son conteneur parent. Ainsi, vous devrez peut-être utiliser 0 pour X ou une valeur négative si vous souhaitez le décaler, de sorte que l'image se retrouve à la coordonnée X = 0 du parent. Gardez à l'esprit que box-sizing affectera les valeurs.

En fonction de votre projet, vous pouvez également utiliser la fonction calc de CSS3 ou une solution JavaScript / jQuery.

Voici quelques liens que j'ai trouvés qui pourraient vous aider:

Voici un article MDN pour plus d'informations.

1
Community 23 mai 2017 à 12:34