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


Answers

إذا كنت تريد أيضًا تعيين موضع خلفية لصورتك ، يمكنك استخدام هذا:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

أو يمكنك أيضًا إنشاء LESS mixin (نمط bootstrap):

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}
Question

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




يمكنك ببساطة كتابة:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);




إليك MIXIN الذي أنشأته للتعامل مع كل ما قد يرغب الأشخاص في استخدامه:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

يمكن استخدام هذا مثل:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

آمل يا رفاق تجد هذا مفيد.

الائتمان ل @ Gidgidonihah لإيجاد الحل الأولي.




أنا قدمت مثالا مع يتمتع بها

http://enjoycss.com/5q#background

في enjoycss محرر يمكنك conbine أي عدد من الخلفيات ، الخطية ، تكرار الخطي ، شعاعي ، تكرار شعاعي ، الصور والألوان

قمت بتعديل الخلفيات الخاصة بك مع واجهة المستخدم الرسومية و automaticaly يولد رمز

الكود هنا http://enjoycss.com/5q/code/0/background#background




بلدي الحل:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);



لتصميمي المتجاوب ، أسفل مربع السهم لأسفل على الجانب الأيمن من المربع (الأكورديون الرأسي) ، النسبة المئوية المقبولة كموضع. في البداية كان السهم المتجه لأسفل عبارة "position: absolute؛ right: 13px؛". مع المواقع 97 ٪ عملت مثل سحر على النحو التالي:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

PS عذرا ، لا أعرف كيفية التعامل مع الفلاتر.




كطريقة طريقة مؤكدة ، يمكنك فقط إنشاء صورة خلفية على سبيل المثال 500x5 بكسل ، في استخدام css الخاص بك:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

حيث يتوافق xxxxxx مع اللون الذي يطابق لون التدرج النهائي.

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




كنت أرغب في جعل زر تمتد مع صورة الخلفية ، مزيج التدرج الخلفية.

http://enjoycss.com/ ساهم في القيام بمهمتي. فقط لا بد لي من إزالة بعض CSS الإضافية التي تم إنشاؤها تلقائيا. ولكنه موقع رائع بالفعل بناء عملك الصفر.

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}



Links