هل من الممكن الحصول على لونين للخلفية لعنصر html واحد؟




css background (2)

هذا السؤال لديه بالفعل إجابة هنا:

أحاول إضافة 2 ألوان خلفية مختلفة إلى نفس فئة css.

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 4px;
    background-color: #d6d6c2;
    z-order: 0;

}

هل من الممكن الحصول على لون خلفية واحد لأول 50٪ (مع الأخذ في الاعتبار العرض الكلي) ولون آخر في الخلفية للباقي؟ إذا كان لا يمكن تحقيق ذلك ، فهل يمكن لأي شخص أن يقترح علي حيلة لتحقيق ذلك؟


ببساطة استخدم التدرج الخطي كخلفية ويمكنك بسهولة ضبط الاتجاه والألوان ونسبة مئوية من كل لون:

body {
  margin: 0;
  background: linear-gradient(to right, red 50%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}
some content

body {
  margin: 0;
  background: linear-gradient(to bottom, red 60%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}
some content

أو باستخدام عنصر زائف ولون خلفية بسيط ، يمكنك ببساطة التحكم في موضع / حجم العنصر الزائف للتحكم في كلتا الخلفية:

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: blue;
  z-index:-1;
}
some content

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 40%;
  left: 0;
  right: 0;
  background: blue;
  z-index:-1;
}
some content

إذا كنت تريد أكثر من ذلك

يمكنك دمج ألوان مختلفة داخل التدرج اللوني واستخدام خلفية خطية متعددة من أجل تحقيق تقسيم لوني أكثر تعقيدًا لخلفيتك:

body {
  margin: 0;
  background:linear-gradient(30deg, red 50%, blue 50%, blue 70%,orange 70%) left/50% 100% no-repeat,              
              linear-gradient(-30deg, red 50%, blue 50%, blue 70%,orange 70%) right/50% 100% no-repeat;
  
  height:100vh;
  text-align:center;
  color:#fff;
}
some content

يمكنك أيضًا أن تفعل الشيء نفسه باستخدام العنصر الزائف ، وكذلك استخدام بعض تحويلات CSS (التناوب ، الانحراف ، إلخ):

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: 50%;
  background: blue;
  transform: skew(30deg);
  z-index: -1;
}

body:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: -50%;
  background: orange;
  transform: skew(-30deg);
  z-index: -1;
}
some content


يمكنك إضافة div نسبيًا للموضع مع فئة زائفة للموضع المطلق عند ارتفاع 50٪.

مثال:

.the-double-color {
  height:100vh;
  background-color:red;
  position:relative;
  width:100%;
}

.the-double-color:before {
  content:'';
  background-color:blue;
  position:absolute;
  top:0px;
  height:50%;
  width:100%;
}

هنا pen





background-color