css - react - استخدام قيم النسبة المئوية مع وضع الخلفية في التدرج الخطي



linear gradient react native (1)

TL، DR

جميع قيم النسبة المئوية المستخدمة مع background-position متكافئة عند استخدام التدرج كخلفية ، لذلك لن ترى أي فرق. تحتاج إلى تحديد background-size مختلف عن حجم الحاوية:

body {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  min-height:90vh;
}

.button {
  text-decoration: none;
  color: white;
  font-weight: bold;
  width: 350px;
  height: 50px;
  text-align:center;
  transition: background 0.5s;
  background-repeat: no-repeat;
  background-image: 
    linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), 
    linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
  background-size:200% 100%; /*Changed this*/
}
.button-pixel {
  background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
  background-position: 0px 0px, 350px 0px;
}
.button-percentage {
  background-position: 100% 0px, 0px 0px;
}
.button-percentage:hover {
  background-position: 0% 0px, 100% 0px;
}
<a href="#" class="button button-pixel">Pixel</a>
<a href="#" class="button button-percentage">Percentage</a>

كيف يعمل موقع الخلفية؟

دعنا نستخدم صورة كلاسيكية لشرح كيفية عمل background-position .

عند استخدام قيم البيكسل ، يكون المرجع هو الزاوية العليا / اليسرى من الصورة ، مهما كان الحجم. يشبه استخدام top / left مع عنصر وضع:

.box {
  width:200px;
  height:200px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:1px solid;
  background-position:0 0;
  background-repeat:no-repeat;
  position:relative;
  animation:back 5s infinite linear alternate;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:10px;
  height:10px;
  background:red;
  z-index:1;
  animation:change 5s infinite linear alternate;
}
@keyframes back{
  to{background-position:200px 200px;}
}
@keyframes change{
  to{top:200px; left:200px;}
}
<div class="box">

</div>

عند استخدام قيم النسبة المئوية ، يكون المرجع مختلفًا عند استخدام قيم البكسل ؛ لم يعد الركن العلوي / الأيسر:

.box {
  width:200px;
  height:200px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:1px solid;
  background-position:0% 0%;
  background-repeat:no-repeat;
  position:relative;
  animation:back 5s infinite linear alternate;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:10px;
  height:10px;
  background:red;
  z-index:1;
  animation:change 5s infinite linear alternate;
}
@keyframes back{
  to{background-position:100% 100%;}
}
@keyframes change{
  to{top:200px; left:200px;}
}
<div class="box">

</div>

في هذه الحالة ، نحتاج إلى النظر في معلمتين: حجم الحاوية وحجم الصورة. فيما يلي توضيح لكيفية عملها (لقد حصلت على وظيفة background-position تساوي 30% 30% ):

أولاً ، نعتبر الصورة للعثور على النقطة المرجعية التي سنستخدمها لوضع الصورة. إنها النقطة التي توجد داخل الصورة 30% 30% من الزاوية العلوية / اليسرى مع مراعاة حجم الصورة (كما هو محدد في الخطوط الخضراء). بعد ذلك ، نضع هذه النقطة داخل الحاوية 30% 30% من الزاوية العليا / اليسرى بالنظر إلى حجم الحاوية .

من هذا المنطق ، يمكننا تحديد بعض الحالات التافهة بشكل واضح

50% 50% (الوسط) 100% 100% (أسفل اليمين) 100% 0% (أعلى اليمين)

1 أسفل القائمة الكاملة للقيم

من الواضح الآن أنه إذا كان حجم الصورة يساوي حجم الحاوية ، فلن يحدث شيء ببساطة لأن كل المواضع متساوية . أعلى / يسار الصورة موجود بالفعل في أعلى / يسار (0٪ 0٪) من الحاوية ، الوسط موجود بالفعل في المنتصف (50٪ 50٪) إلخ.

.box {
  width:200px;
  height:200px;
  background-image:url(https://picsum.photos/200/200?image=1069);
  border:1px solid;
  background-position:0% 0%;
  background-repeat:no-repeat;
  position:relative;
  animation:back 5s infinite linear alternate;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:10px;
  height:10px;
  background:red;
  z-index:1;
  animation:change 5s infinite linear alternate;
}
@keyframes back{
  to{background-position:100% 100%;}
}
@keyframes change{
  to{top:calc(100% - 5px); left:calc(100% - 5px);}
}
<div class="box">

</div>

يكون المنطق أعلاه هو نفسه عند تطبيقه على التدرجات نظرًا لأن التدرجات تعتبر صورًا ، وإذا لم تحدد background-size ، فسيكون حجم التدرج اللوني حجم الحاوية الخاصة به ، على عكس عند استخدام صورة.

إذا أشرنا إلى specification background-size ، يمكننا أن نرى كيف تنشأ مشكلتك:

ملحوظة:

إذا كانت كلتا القيمتين تلقائية ، فيجب استخدام العرض الجوهري و / أو ارتفاع الصورة ، إن وجدت ، البعد المفقود (إن وجد) يتصرف بشكل تلقائي كما هو موضح أعلاه. إذا لم يكن للصورة عرض جوهري ولا ارتفاع جوهري ، فسيتم تحديد حجمها على أنها تحتوي على .

و:

يحتوي

قم بتحجيم الصورة ، مع الحفاظ على نسبة العرض إلى الارتفاع الحقيقية (إن وجدت) ، إلى أكبر حجم بحيث يمكن أن يتناسب عرضه وارتفاعه داخل منطقة تحديد موضع الخلفية.

و أيضا:

صورة نقطية (مثل JPG) دائمًا لها أبعاد ونسب جوهرية .

ليس لـ CSS <gradient> أبعاد جوهرية أو أبعاد جوهرية . ref

تحتوي الصورة دائمًا على قيم جوهرية ، لذلك في معظم الحالات لن يكون لها نفس حجم الحاوية الخاصة بها ، لذلك سيكون background-position مع وحدات النسبة المئوية تأثير. لكن التدرجات لا تحتوي على قيم جوهرية ، وبالتالي فإن أبعاد التدرج ستكون مساوية لحجم الحاوية الخاصة بها ، ولن background-position مع قيم النسبة المئوية أبدًا ما لم نحدد background-size مختلفًا عن أبعاد الحاوية.


اكثر في العمق

لقد رأينا في الأمثلة أعلاه كيف يعمل background-size عند استخدام القيم بين 0% و 100% ، ولكن ماذا عن استخدام القيم السلبية أو قيمة أكبر من 100% ؟ المنطق هو نفسه ، ولكن العثور على نقطة مرجعية سيكون أكثر صعوبة.

القيم السالبة (<0٪)

لنفترض أننا نريد وضع خلفية عند -50% 0 . في هذه الحالة ، ستكون النقطة المرجعية خارج الصورة. هنا مثال:

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:url(https://picsum.photos/100/100?image=1069) -50% 0/100px 100px no-repeat;
}
<div class="box"></div>

كما يمكننا أن نرى في الرسم التوضيحي ، فإننا نعتبر أولاً -50% من الصورة ، وهي -50px ، من أجل تحديد النقطة المرجعية (أي -50 بكسل من الحافة اليسرى من الصورة). ثم نضع هذه النقطة عند -50% بالنظر إلى حجم الحاوية (-100 بكسل من الحافة اليسرى للحاوية). ثم نرسم الصورة ، ونحصل على النتيجة أعلاه. 100px فقط من الصورة مرئية.

قد نلاحظ أيضًا أن قيم النسبة المئوية السالبة سوف تتصرف مثل القيم الثابتة السالبة عندما يكون حجم الصورة أصغر من حجم الحاوية (كلاهما سينقلان الصورة إلى اليسار). في هذه الحالة -50% 0 هي نفس -50px 0 .

.box {
  width:200px;
  height:200px;
  display:inline-block;
  border:1px solid;
  background:url(https://picsum.photos/100/100?image=1069) -50% 0/100px 100px no-repeat;
}
.alt{
  background:url(https://picsum.photos/100/100?image=1069) -50px 0/100px 100px no-repeat;
}
<div class="box">
</div>
<div class="box alt">
</div>

على سبيل المثال ، إذا قمنا بزيادة حجم الصورة إلى 150px 150px ، فسيكون -50% 0 هو نفسه -25px 0 .

عندما نجعل الحجم أكبر من الحاوية ، ستبدأ القيم السلبية في نقل الصورة إلى اليمين (كما هو الحال مع قيم البيكسل الموجبة) ، وهو أمر منطقي لأن 50% من الصورة ستزيد بينما تظل 50% من الحاوية هي نفسه.

إذا أخذنا في الاعتبار الرسم التوضيحي السابق ، فسيكون مثل زيادة الخط الأخضر العلوي حتى يصبح أكبر من الخط السفلي. وبالتالي فإن العلامة فقط ليست كافية لمعرفة كيف سيتم تحويل صورة الخلفية ؛ نحن بحاجة إلى النظر أيضا في الحجم.

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:url(https://picsum.photos/300/300?image=1069) -50% 0/150px 150px no-repeat;
  animation:change 2s linear infinite alternate; 
}
@keyframes change{
  from {background-size:50px 50px}
  to {background-size:300px 300px}
}
<div class="box">
</div>

نفس الشيء سيحدث منطقيا للتدرجات:

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:linear-gradient(to right,red,blue) -50% 0/150px 50px no-repeat;
  animation:change 2s linear infinite alternate; 
}
@keyframes change{
  from {background-size:50px  50px}
  to   {background-size:300px 50px}
}
<div class="box">
</div>

القيم الكبيرة (> 100٪)

نفس المنطق كما كان من قبل: إذا حددنا خلفية عند 150% 0 ، فإننا نعتبر النقطة المرجعية 150% من الحافة اليسرى (أو 50% من الحافة اليمنى) ، ثم نضعها 150% من الحافة اليسرى للحاوية .

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:url(https://picsum.photos/100/100?image=1069) 150% 0/100px 100px no-repeat;
}
<div class="box">
</div>

في هذه الحالة ، يكون 150% 0 مكافئًا لـ 150px 0 ، وإذا بدأنا بزيادة حجم الخلفية ، فسوف يكون لدينا نفس السلوك كما هو موضح سابقًا:

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:url(https://picsum.photos/300/300?image=1069) 150% 0/100px 100px no-repeat;
  animation:change 2s infinite linear alternate;
}
@keyframes change {
  from {background-size:50px 50px}
  to {background-size:300px 300px}
}
<div class="box">
</div>


حالات خاصة

يتيح لنا استخدام القيم خارج النطاق [0% 100%] إخفاء صورة الخلفية ، لكن كيف يمكننا العثور على القيم الدقيقة لإخفاء الصورة تمامًا؟

دعونا ننظر في التوضيح أدناه:

صورتنا لها عرض Ws والحاوية عرض Wp ونحن بحاجة إلى إيجاد قيمة p . من الشكل يمكننا الحصول على الصيغة التالية:

p * Wp = p * Ws + Ws   <=>   p = Ws/(Wp - Ws)   where p in [0,1]

إذا كان حجم الحاوية 200px وكانت الصورة 100px فإن p هو 1 حتى 100% (نضيف بالطبع العلامة السالبة و -100% ).

يمكننا أن نجعل هذا أكثر عمومية إذا أخذنا في الاعتبار قيم النسبة المئوية مع background-size بدلاً من القيم الثابتة. افترض أن background-size هو S% . بعد ذلك ، سيكون لدينا Ws = Wp * s (s in [0,1] and S=s*100%) ، وستكون الصيغة

p = Ws/(Wp - Ws)   <=>   p = s / (1 - s)

عند إضافة العلامة السالبة ، ستكون p = s / (s - 1) .

الآن إذا أردنا إخفاء الصورة على الجانب الأيمن ، فإننا نفعل نفس المنطق على اليمين (نعتبر مرآة الشكل التوضيحي السابق) ، ولكن نظرًا إلى أننا سننظر دائمًا في الحافة اليسرى للعثور على النسبة المئوية التي نحتاج إليها لإضافة 100%

النسبة المئوية الجديدة p'% هي 100% + p% ، وستكون الصيغة p' = 1 + p --> p' = 1 + s / (1 - s) = 1 / (1 - s) .

فيما يلي رسوم متحركة لتوضيح الحساب أعلاه:

.box {
  width:200px;
  height:50px;
  margin:5px;
  border:1px solid;
  background-image:linear-gradient(to right,red,blue);
  background-position:0 0;
  background-size:calc(var(--s) * 100%) 100%;
  background-repeat:no-repeat;
  animation:change 4s linear infinite alternate;
}
@keyframes  change{
   from { /*Hide on the left*/
     background-position:calc(var(--s)/(var(--s) - 1) * 100%)
   }
   to { /*Hide on the right*/
     background-position:calc(1/(1 - var(--s)) * 100%)
   }
}
<div class="box" style="--s:0.5">
</div>
<div class="box" style="--s:0.8">
</div>
<div class="box" style="--s:2">
</div>

دعنا نحسب بعض القيم:

عندما تكون s=0.5 ، لدينا background-size يساوي 50% ، وستكون قيم النسبة المئوية من -100% إلى 200% . في هذه الحالة ، بدأنا بقيمة سالبة وانتهينا بقيمة موجبة لأن حجم الصورة أصغر من حجم الحاوية . إذا أخذنا في الاعتبار الحالة الأخيرة ( s=2 ) ، فإن background-size يساوي 200% ، وستكون قيم النسبة المئوية من 200% إلى -100% . لقد بدأنا بقيمة موجبة وانتهينا بقيمة سالبة لأن حجم الصورة أكبر من حجم الحاوية .

هذا يؤكد ما قلناه سابقًا: لتحويل الصورة إلى اليسار ، نحتاج إلى قيم سالبة إذا كان الحجم صغيرًا ، لكننا نحتاج إلى قيم إيجابية إذا كان الحجم كبيرًا (نفس الشيء بالنسبة لليمين).


العلاقة بين بكسل والنسبة المئوية القيم

دعنا نحدد طريقة لحساب قيم النسبة المئوية بناءً على قيم البكسل ، أو العكس (أي صيغة التحويل بين الاثنين). للقيام بذلك نحتاج ببساطة إلى النظر في النقاط المرجعية.

عند استخدام قيم البكسل ، سنأخذ بعين الاعتبار الخطوط الزرقاء وسيكون لدينا background-position:XY .

عند استخدام قيم النسبة المئوية ، سنأخذ بعين الاعتبار الخطوط الخضراء وسنكون background-position:Px Py .

ستكون الصيغة كما يلي: Y + Py * Ws = Py * Wp حيث Ws هو عرض الصورة و Wp هو عرض الحاوية (نفس الصيغة لمحور X مع مراعاة الارتفاع).

سيكون لدينا Y = Py * (Wp - Ws) . من هذه الصيغة يمكننا التحقق من صحة نقطتين كما هو موضح سابقا:

  • عندما تكون Wp = Ws ، لم تعد الصيغة صالحة ، مما يؤكد أن قيم النسبة المئوية لن يكون لها تأثير عندما يكون حجم الصورة هو نفسه الحاوية ؛ وبالتالي لا توجد علاقة بين قيم البكسل والنسبة المئوية.
  • Y و Py نفس الإشارة عند Wp > Ws وسيكون لديك علامة معاكسة عند Wp < Ws . هذا يؤكد أن قيمة النسبة المئوية تتصرف بشكل مختلف حسب حجم الصورة.

يمكننا أيضًا التعبير عن الصيغة بشكل مختلف إذا أخذنا في الاعتبار قيمة النسبة المئوية background-size . سيكون لدينا Y = Py * Wp * (1-s) .

فيما يلي رسوم متحركة لتوضيح الحساب أعلاه:

.box {
  width:200px;
  height:50px;
  margin:5px;
  border:1px solid;
  background-image:linear-gradient(to right,red,blue);
  background-position:0 0;
  background-size:calc(var(--s) * 100%) 100%;
  background-repeat:no-repeat;
  animation:percentage 2s linear infinite alternate;
}
.box.alt {
  animation-name:pixel; 
}
@keyframes  percentage{
   from { background-position:-50%;}
   to { background-position:150%;}
}
@keyframes  pixel{
   from { background-position:calc(-0.5 * 200px * (1 - var(--s))) }
   to {  background-position:calc(1.5 * 200px * (1 - var(--s)));}
}
<div class="box" style="--s:0.5">
</div>
<div class="box alt" style="--s:0.5">
</div>

<div class="box" style="--s:2">
</div>
<div class="box alt" style="--s:2">
</div>


تغيير المرجع

في الحسابات أعلاه ، نظرنا دائمًا في الزاوية العلوية / اليسرى من الصورة والحاوية من أجل تطبيق منطقنا إما لقيم البكسل أو قيم النسبة المئوية. يمكن تغيير هذا المرجع عن طريق إضافة المزيد من القيم إلى background-position .

حسب وضع background-position: XY الافتراضي background-position: XY تعادل background-position: left X top Y (الموضع في X من left وفي Y من top ). عن طريق ضبط top و / أو left نقوم بتغيير المرجع وكيفية وضع الصورة. وهنا بعض الأمثلة:

.box {
  width:150px;
  height:150px;
  display:inline-block;
  background-image:url(https://picsum.photos/70/70?image=1069);
  border:1px solid;
  background-position:0 0;
  background-repeat:no-repeat;
  position:relative;
}

body {
 margin:0;
}
<div class="box"></div>
<div class="box" style="background-position:left 0 bottom 0"></div>
<div class="box" style="background-position:right 0 bottom 0"></div>
<div class="box" style="background-position:right 0 top 0"></div>


<div class="box" style="background-position:right 10% top 30%"></div>
<div class="box" style="background-position:right 10% bottom 30%"></div>
<div class="box" style="background-position:right 10px top 20px"></div>
<div class="box" style="background-position:left 50% bottom 20px"></div>

من الواضح أنه بالنسبة لقيمة X يمكننا فقط استخدام left right (الموضع الأفقي) ومع القيمة Y يمكننا فقط استخدام bottom top (الموضع العمودي). مع كل المجموعات المختلفة ، يمكننا الحصول منطقياً على الزوايا الأربعة المختلفة.

هذه الميزة مفيدة أيضًا من أجل تحسين بعض الحسابات. في مثال قسم الحالات الخاصة ، أجرينا عملية حسابية أولية لإخفاء الصورة على اليسار ثم أخرى لإخفائها على اليمين. إذا فكرنا في تغيير المرجع ، فنحن بحاجة فقط لإجراء حساب واحد. نحن نأخذ الصيغة المستخدمة للجانب الأيسر ونستخدم نفس الصيغة على الجانب الأيمن.

هنا هو الإصدار الجديد:

.box {
  width:200px;
  height:50px;
  margin:5px;
  border:1px solid;
  background-image:linear-gradient(to right,red,blue);
  background-position:0 0;
  background-size:calc(var(--s) * 100%) 100%;
  background-repeat:no-repeat;
  animation:change 4s linear infinite alternate;
}
@keyframes  change{
   from { /*Hide on the left*/
     background-position:left calc(var(--s)/(var(--s) - 1) * 100%) top 0
   }
   to { /*Hide on the right*/
     background-position:right calc(var(--s)/(var(--s) - 1) * 100%) top 0
   }
}
<div class="box" style="--s:0.5">
</div>
<div class="box" style="--s:0.8">
</div>
<div class="box" style="--s:2">
</div>

بالنسبة إلى s=0.5 لن نحرك أكثر من -100% إلى 200% ولكن سيكون من left -100% إلى right -100% .

فيما يلي مثال آخر باستخدام قيم البكسل حيث يمكننا أن نرى بوضوح مدى سهولة التعامل مع الحساب عند تغيير المرجع:

.box {
  width:200px;
  height:200px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:1px solid;
  background-position:0 0;
  background-repeat:no-repeat;
  animation:change 2s infinite linear;
}


@keyframes change{
  0%{background-position:left 20px top 20px;}
  25%{background-position:right 20px top 20px;}
  50%{background-position:right 20px bottom 20px;}
  75%{background-position:left 20px bottom 20px;}
  100%{background-position:left 20px top 20px;}
}
<div class="box"></div>

سيكون من الصعب تحقيق نفس الرسوم المتحركة عن طريق الحفاظ على نفس المرجع. لذلك إذا أردنا أن نقوم بعمل رسوم متحركة متناظرة ، فنحن ننفذ منطقنا من جانب ونستخدم نفس الشيء على الجانب الآخر عن طريق تغيير المرجع.


الجمع بين بكسل والنسبة المئوية القيم

في CSS3 ، يمكننا استخدام calc() للقيام ببعض العمليات الحسابية المعقدة التي تتضمن وحدات مختلفة. على سبيل المثال ، يمكننا كتابة width:calc(100px + 20% + 12em) المتصفح القيمة المحسوبة مع الأخذ في الاعتبار كيفية عمل كل وحدة width:calc(100px + 20% + 12em) بقيمة بكسل (لهذه الحالة).

ماذا عن background-position ؟ إذا calc(50% + 50px) ، فهل سيتم تقييم ذلك إلى قيمة مئوية أو قيمة بكسل؟ هل سيتم تحويل قيمة البيكسل إلى نسبة مئوية أم العكس؟

لن يتم تحويل النتيجة إلى قيمة بكسل أو قيمة مئوية ، ولكن سيتم استخدام كليهما معًا! background-position لديه سلوك خاص عند مزج القيم المئوية وقيم بكسل داخل calc() والمنطق على النحو التالي:

  1. نستخدم أولاً قيمة النسبة المئوية لوضع الصورة عن طريق تطبيق كل المنطق المتعلق بقيم النسبة المئوية.
  2. نعتبر موضع (1) كمرجع ونستخدم قيمة البيكسل لوضع الصورة مرة أخرى عن طريق تطبيق كل المنطق المتعلق بقيم البيكسل.

يعني calc(50% + 50px) : توسيط الصورة ، ثم حركها بمقدار 50px إلى اليسار.

هذه الميزة يمكن أن تبسط الكثير من الحساب. هنا مثال:

.box {
  width:200px;
  height:200px;
  display:inline-block;
  border:1px solid;
  background-image:
    linear-gradient(red,red),
    linear-gradient(red,red),
    linear-gradient(red,red),
    linear-gradient(red,red);
 background-size:20px 20px;
 background-position:
    calc(50% + 20px) 50%,
    calc(50% - 20px) 50%,
    50% calc(50% - 20px),
    50% calc(50% + 20px);
 background-repeat:no-repeat;
 transition:0.5s;
}
.box:hover {
  background-position:50%;
}
<div class="box"></div>
<div class="box" style="width:100px;height:100px;"></div>

سيكون من الممل العثور على قيم النسبة المئوية الصحيحة أو البيكسل لوضع المربعات الحمراء الأربعة المذكورة أعلاه ، ولكن من خلال المزج بين الاثنين باستخدام calc() يصبح الأمر سهلاً للغاية.

الآن ، لنفترض أن لدينا شيئًا كالتالي: calc(10% + 20px + 30% + -10px + 10% + 20px) . كيف سيتعامل المتصفح مع هذا؟

في هذه الحالة ، سيقوم المستعرض أولاً بتقييم كل وحدة للحصول على نموذج calc(X% + Ypx) المبسط calc(X% + Ypx) ثم يطبق المنطق أعلاه لوضع الصورة.

calc(10% + 20px + 30% + -10px + 10% + 20px) 
calc((10% + 30% + 10%) + (20px + -10px +20px)) 
calc(50% + 30px)

.box {
  display:inline-block;
  width:200px;
  height:200px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:1px solid;
  background-position:calc(10% + 20px + 30% + -10px + 10% + 20px) 0;
  background-repeat:no-repeat;
}
.alt {
  background-position:calc(50% + 30px) 0;
}
 
<div class="box"></div>
<div class="box alt"></div>

مهما كان تعقيد الصيغة ، سيقوم المتصفح دائمًا بتقييم قيم النسبة المئوية والبكسل بشكل منفصل.


باستخدام المزيد من الوحدات

إلى جانب وحدة px يمكننا أيضًا استخدام جميع الوحدات المشتركة في موضع الخلفية مثل em ، ch ، ex ، rem ، cm ، إلخ. الكل سوف يتصرف بنفس قيم البيكسل.

.box {
  display:inline-block;
  width:200px;
  height:200px;
  font-size:25px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:1px solid;
  background-position:50px 0;
  background-repeat:no-repeat;
}
.em {
  background-position:2em 0;
}
.ch {
  background-position:2ch 0;
}
:root { font-size:50px}
.rem {
  background-position:1rem 0;
}
<div class="box"></div>
<div class="box em"></div>
<div class="box ch"></div>
<div class="box rem"></div>

لذلك يمكننا إما استخدام قيم النسبة المئوية أو قيم الطول ( px ، em ، ch ، إلخ)


باستخدام الخلفية الأصل

إليك خاصية مهمة أخرى يمكن استخدامها لتغيير موضع صورة الخلفية. تعتمد هذه الخاصية على طراز الصندوق ، لذلك تتيح لك تذكير سريع حول كيفية عمل ذلك:

يحتوي كل عنصر على 3 صناديق مختلفة بداخله: الصندوق الحدودي ، صندوق الحشو ومربع المحتوى. يحدد background-origin المربع الذي يتعين علينا مراعاته من أجل القيام بكل منطقنا السابق.

فيما يلي مثال توضيحي:

.box {
  display:inline-block;
  width:200px;
  height:200px;
  font-size:25px;
  background-image:url(https://picsum.photos/100/100?image=1069);
  border:20px solid rgba(0,0,0,0.1);
  padding:20px;
  background-position:0 0;
  background-repeat:no-repeat;
  box-sizing:border-box;
}
.border {
  background-origin:border-box;
}
.padding {
  background-origin:padding-box; /*the default value*/
}
.content {
  background-origin:content-box;
}
<div class="box border"></div>
<div class="box padding"></div>
<div class="box content"></div>

يجب أن يكون واضحًا الآن أنه عندما لا يكون لدينا content-box معادل padding-box ، وعندما لا يكون لدينا border-box padding-box يعادل.


1 : فيما يلي القائمة الكاملة بالقيم المكافئة:

  • left = left center = center left = 0 50%
  • right = right center = center right = 100% 50%
  • top = top center = center top = 50% 0
  • bottom = bottom center = center bottom = 50% 100%
  • center = center center = 50% 50%


  • top left = left top = 0 0
  • top right = right top = 100% 0
  • bottom left = left bottom = 0 100%
  • bottom right = right bottom = 100% 100%


  • top X left Y = left Y top X = YX
  • top X right Y = right Y top X
  • bottom X left Y = left Y bottom X
  • bottom X right Y = right Y bottom X

المرجع الرسمي: https://www.w3.org/TR/css-backgrounds-3/


في معظم الحالات ، نظرت في محور واحد فقط للتفسير / الحساب ، ولكن نفس القواعد تنطبق على كلا المحورين وكلاهما مستقل.

هل هناك أي طريقة لجعل background-position تأخذ قيم النسبة المئوية؟ حاليًا يعمل الزر الخاص بي فقط مع قيم واضحة width background-position .

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: white;
  font-weight: bold;
  width: 350px;
  height: 50px;
  border: 1px solid green;
  transition: background 0.5s;
  background-repeat: no-repeat;
  background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
  background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
  background-position: 0px 0px, 350px 0px;
}
.button-percentage {
  background-position: -100% 0px, 0px 0px;
}
.button-percentage:hover {
  background-position: 0% 0px, 100% 0px;
}
<a href="#" class="button button-pixel">In Pixel</a>
<a href="#" class="button button-percentage">In Percentage</a>





background-position