كيف أقوم بتضمين صورة الخلفية وتدرج 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 لتطبيق نوع من النسيج الشفاف الخفيف؟




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

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

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

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




بلدي الحل:

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);



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

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;
}



لتصميمي المتجاوب ، أسفل مربع السهم لأسفل على الجانب الأيمن من المربع (الأكورديون الرأسي) ، النسبة المئوية المقبولة كموضع. في البداية كان السهم المتجه لأسفل عبارة "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 عذرا ، لا أعرف كيفية التعامل مع الفلاتر.




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

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

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

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

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




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

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 لإيجاد الحل الأولي.




Links