عكس لون خط CSS بناءً على لون الخلفية

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

استخدام العناصر الزائفة

يمكن استخدام العناصر الزائفة لإنشاء غلاف حول النص، والذي يمكنك بعد ذلك تصفيف الشعر بشكل مستقل. على سبيل المثال:

.inverted-bar {
    position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
    padding: 10px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-content);
}

.inverted-bar:before {
    background-color: aqua;
    color: red;
    width: 100%;
}

.inverted-bar:after {
    background-color: red;
    color: aqua;
    width: 20%;
}

استخدام عنصري DIV

بالنسبة للمتصفحات القديمة التي لا تدعم العناصر الزائفة، يمكنك استخدام عنصري DIV بدلاً من ذلك:

.inverted-bar {
    position: relative;
    padding: 10px;
    text-indent: 10px;
}

.inverted-bar:before {
    content: attr(data-content);
    background-color: aqua;
    color: red;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
}

.inverted-bar > div {
    content: attr(data-content);
    background-color: red;
    color: aqua;
    position: absolute;
    padding: 10px 0;
    top: 0;
    left: 0;
    width: 20%;
}

ملاحظة: قد يختلف التنفيذ الدقيق وفقًا لمتطلباتك المحددة ودعم المتصفح.