css تغير - كيف أقوم بتضمين صورة الخلفية وتدرج CSS3 على نفس العنصر؟




9 Answers

خلفيات متعددة!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

هذان الخطان هما الخلف لأي متصفح لا يقوم بالتدرجات. انظر ملاحظات لتكديس الصور فقط IE <9 أدناه.

  • السطر 1 يحدد لون خلفية مسطح.
  • يحدد السطر 2 صورة الخلفية الاحتياطية.

يقوم السطر الأخير بتعيين صورة خلفية وتدرج للمتصفحات التي يمكنها التعامل معها.

  • السطر 3 مخصص لجميع المتصفحات الحديثة نسبيًا.

تحتوي جميع المتصفحات الحالية تقريبًا على دعم لصور خلفية متعددة وخلفيات CSS. راجع http://caniuse.com/#feat=css-gradients لدعم المستعرض. للحصول على مشاركة جيدة حول سبب عدم حاجتك إلى العديد من بادئات المتصفح ، راجع http://codepen.io/thebabydino/full/pjxVWp/

طبقة مكدس

وتجدر الإشارة إلى أن أول صورة محددة ستكون أعلى في المكدس. في هذه الحالة ، تكون الصورة على قمة التدرج.

لمزيد من المعلومات حول طبقات الخلفية ، راجع http://www.w3.org/TR/css3-background/#layering .

التراص الصور فقط (لا التدرجات في الإعلان) ل IE <9

يمكن IE9 وأعلى مكدس الصور بنفس الطريقة. يمكنك استخدام هذا لإنشاء صورة تدرج ل ie9 ، على الرغم من شخصيا ، لن أكون. ومع ذلك ، يمكن ملاحظة ذلك عند استخدام الصور فقط ، أي <9 سوف يتجاهل العبارة الاحتياطية ولا يظهر أي صورة. هذا لا يحدث عندما يتم تضمين التدرج. لاستخدام صورة احتياطية واحدة في هذه الحالة ، أقترح عليك استخدام عنصر HTML المشروط الرائع الخاص بشركة Paul Irish إلى جانب رمزك الاحتياطي:

.lte9 #target{ background-image: url("IMAGE_URL"); }

موقف الخلفية ، التحجيم الخ

يمكن أيضًا فصل بعض الخصائص الأخرى التي يمكن تطبيقها على صورة واحدة. إذا تم توفير قيمة واحدة فقط ، فسيتم تطبيق ذلك على كل الصور المكدسة بما في ذلك التدرج. background-size: 40px; سيؤدي إلى تقييد كل من الصورة وتدرجها إلى ارتفاع 40 بكسل وعرضها. ومع ذلك ، استخدم background-size: 40px, cover; سيجعل الصورة 40 بكسل وسيغطي التدرج العنصر. لتطبيق إعداد على صورة واحدة فقط ، اضبط الإعداد الافتراضي على الآخر: background-position: 50%, 0 0; أو للمتصفحات التي تدعمها تستخدم initial : background-position: 50%, initial;

يمكنك أيضًا استخدام الاختزال في الخلفية ، ولكن هذا يزيل اللون الاحتياطي والصورة.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

وينطبق الشيء نفسه على وضع الخلفية ، تكرار الخلفية ، إلخ.

لون كود

كيف أستخدم تدرجات CSS3 لوني ، ثم طبّق صورة background-image لتطبيق نوع من النسيج الشفاف الخفيف؟




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

  body {
    background-image: url("http://www.skrenta.com/images/.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/.jpg"), -moz-linear-gradient(top, red, yellow);
  }

يمكنك أيضًا تحديد مواضع الخلفية وحجم الخلفية للصور. أعددت مشاركة مدونة حول بعض الأشياء المثيرة للاهتمام التي يمكنك القيام بها باستخدام تدرجات CSS3




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

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

يعتني SASS و Bourbon بالشفرة المتقاطعة ، والآن كل ما يجب أن أصرح به هو وضع sprite لكل زر. من السهل تمديد هذا المدير للأزرار النشطة وحالات التمرير.




دائمًا ما أستخدم الشفرة التالية لجعلها تعمل. هناك بعض الملاحظات:

  1. إذا وضعت عنوان URL للصورة قبل التدرج ، فسيتم عرض هذه الصورة أعلى التدرج كما هو متوقع.

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}
<div class="background-gradient"></div>

  1. إذا وضعت تدرجًا قبل عنوان URL للصورة ، فسيتم عرض هذه الصورة أسفل التدرج.

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}
<div class="background-gradient"></div>

هذه التقنية مماثلة تمامًا لأن لدينا صور خلفية متعددة كما هو موضح here




كنت أحاول أن أفعل الشيء نفسه. في حين أن لون الخلفية وصورة الخلفية موجودان في طبقات منفصلة داخل كائن - مما يعني أنهما يمكنهما التعايش - يبدو أن تدرجات CSS تلتقط طبقة الصورة الخلفية.

مما يمكن أن أقوله ، يبدو أن صورة الحدود تتمتع بتأييد أوسع من الخلفيات المتعددة ، لذا ربما يكون هذا أسلوبًا بديلاً.

http://articles.sitepoint.com/article/css3-border-images

استكمال: أكثر قليلا من البحث. يبدو أن Petra Gregorova لديها شيء يعمل هنا -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html




إذا كان لديك أخطاء غريبة مع تنزيل صور الخلفية ، استخدم مدقق W3C Link: https://validator.w3.org/checklink

فيما يلي المزيج الحديث الذي أستخدمه (الاعتمادات: http://codepen.io/thebabydino/full/pjxVWp/ ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}[email protected]{version}"); // fallback
    background: url("@{img-folder}/@{imageName}[email protected]{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}[email protected]{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}



إذا كان عليك الحصول على تدرجات و صور خلفية تعمل معًا في IE 9 (HTML 5 & HTML 4.01 Strict) ، أضف تعريف الخاصية المميزة التالي لفئة css الخاصة بك ويجب أن تقوم بالعمل:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

لاحظ أنك تستخدم سمة filter وأن هناك نسختين من progid:[val] مفصولة بفاصلة قبل إغلاق قيمة السمة بفاصلة منقوطة. ها هي fiddle لاحظ أيضًا أنه عندما تنظر إلى العزف ، فإن التدرج يمتد إلى ما وراء الزوايا المستديرة. ليس لدي حل لهذا آخر لا تستخدم الزوايا دائرية. لاحظ أيضًا أنه عند استخدام مسار نسبي في سمة [IMAGE_URL] src ، يكون المسار متعلقًا بصفحة المستند وليس ملف css (راجع source ).

هذه المقالة ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) هي التي تقودني إلى هذا الحل. انها مفيدة جدا ل CSS3 IE محددة.




أنا حل المشكلة بهذه الطريقة. أحدد التدرج في HTML وصورة الخلفية في الجسم

html {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
  background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
  height: 100%
}
body {
  background: url("http://www.skrenta.com/images/.jpg");
  height: 100%
}




إذا كنت تريد أن يتم دمج الصور معًا تمامًا حيث لا يبدو أن العناصر يتم تحميلها بشكل منفصل بسبب طلبات HTTP منفصلة ، فاستخدم هذه التقنية. نحن هنا نقوم بتحميل شيئين على نفس العنصر الذي يتم تحميله في نفس الوقت ... فقط تأكد من تحويل الصورة png الشفافة 32-bit / text الخاصة بك إلى سلسلة base64 أولاً واستخدامها داخل استدعاء css لخلفية الصورة. لقد استخدمت هذه التقنية لدمج مادة مظهر بسكويت الويفر مع معيار rgba transparent / linear gradient css rule. يعمل بشكل أفضل من وضع طبقات فنية متعددة وإهدار طلبات HTTP التي تعتبر سيئة للجوال.

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }



Related

css css3 background-image gradient