එකම මූලද්‍රව්‍යයේ පසුබිම්-රූපයක් සහ CSS3 ශ්‍රේණිය ඒකාබද්ධ කරන්නේ කෙසේද?

මගේ සඳහා CSS3 ප්‍රමිතීන් භාවිතා background-colorකර පසුව background-imageයම් ආකාරයක සැහැල්ලු විනිවිද පෙනෙන වයනයක් යෙදීම සඳහා අයදුම් කරන්නේ කෙසේද?

බහු පසුබිම්!

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

මෙම පේළි 2 යනු ශ්‍රේණියක් නොකරන ඕනෑම බ්‍රව්සරයක පසුබෑමයි. රූප ගොඩගැසීම සඳහා සටහන් බලන්න 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 අංගය සහ ඔබේ වැටීමේ කේතය භාවිතා කිරීමට:

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

පසුබිම් පිහිටීම, ප්‍රමාණය ආදිය.

තනි රූපයකට අදාළ වන අනෙකුත් ගුණාංග ද කොමාවකින් වෙන් කළ හැකිය. අගය 1 ක් පමණක් සපයා ඇත්නම්, එය ශ්‍රේණිය ඇතුළුව සියලුම සිරස්ව ඇති රූප සඳහා අදාළ වේ. background-size: 40px;රූපය සහ ශ්‍රේණිය යන දෙකම 40px උස හා පළල දක්වා සීමා කරයි. කෙසේ වෙතත් භාවිතා background-size: 40px, cover;කිරීමෙන් රූපය 40px වන අතර ශ්‍රේණිය මූලද්‍රව්‍යය ආවරණය කරයි. එක් පින්තූරයකට පමණක් සැකසීමක් යෙදීමට, පෙරනිමිය අනෙකට සකසන්න: background-position: 50%, 0 0;හෝ එයට සහාය දෙන බ්‍රව්සර් සඳහා initial:background-position: 50%, initial;

ඔබට පසුබිම් කෙටිමං භාවිතා කළ හැකිය, කෙසේ වෙතත් මෙය පසුබෑමේ වර්ණය සහ රූපය ඉවත් කරයි.

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

පසුබිම්-පිහිටීම, පසුබිම්-පුනරාවර්තනය යනාදිය සඳහා ද මෙය අදාළ වේ.

ඔබට මෙය භාවිතා කිරීමට වඩා ඔබේ රූපය සඳහා පසුබිම් පිහිටීම සැකසීමට අවශ්‍ය නම් :

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

නැතහොත් ඔබට අඩු මික්සින් (බූට්ස්ට්‍රැප් විලාසය) නිර්මාණය කළ හැකිය:

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

වටහා ගත යුතු එක් දෙයක් නම්, පළමු අර්ථ දක්වා ඇති පසුබිම් රූපය තොගයේ ඉහළින්ම ඇති බවයි. අවසන් වරට අර්ථ දක්වා ඇති රූපය පහතින්ම වනු ඇත. එයින් අදහස් වන්නේ, රූපයක් පිටුපස පසුබිම් ශ්‍රේණියක් තිබීම සඳහා ඔබට අවශ්‍ය වනු ඇත්තේ:

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

පින්තූර සඳහා පසුබිම් ස්ථාන සහ පසුබිම් ප්‍රමාණයද ඔබට අර්ථ දැක්විය හැකිය. CSS3 ශ්‍රේණි සමඟ ඔබට කළ හැකි රසවත් දේවල් ගැන මම බ්ලොග් සටහනක් තැබුවෙමි

ඔබට සරලව ටයිප් කළ හැකිය:

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

එය ක්‍රියාත්මක කිරීම සඳහා මම සෑම විටම පහත කේතය භාවිතා කරමි. සටහන් කිහිපයක් තිබේ:

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>

2. පින්තූර 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>

මෙහි විස්තර කර ඇති පරිදි අපට බහු පසුබිම් රූප ඇති බැවින් මෙම තාක්ෂණය සමාන වේ

මගේ විසඳුම:

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

මෙම තාක්‍ෂණය පියවරෙන් පියවර ඉදිරියට ගෙනයාමට අවශ්‍ය තැන ක්‍රියාත්මක කිරීමක් මා සතුව තිබූ අතර මගේ කාර්යයන් ගෙනහැර දැක්වීමට අවශ්‍ය විය. පහත කේතය එකම දේ කරන නමුත් සාස්, බෝර්බන් සහ රූප ස්ප්‍රයිට් භාවිතා කරයි.

    @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 හරස් බ්‍රව්සර් කේතය ගැන සැලකිලිමත් වන අතර දැන් මට ප්‍රකාශ කිරීමට ඇත්තේ බොත්තමකට ස්ප්‍රයිට් පිහිටීම පමණි. බොත්තම් සක්‍රිය සහ හොවර් ස්ටේට්ස් සඳහා මෙම විදුහල්පති දිගු කිරීම පහසුය.

පසුබිම් පින්තූර බාගත කිරීමේදී ඔබට අමුතු දෝෂ තිබේ නම් W3C Link checker භාවිතා කරන්න: https://validator.w3.org/checklink

මෙන්න මම භාවිතා කරන නවීන මික්සින් (බැර: PSA: ශ්‍රේණියේ උත්පාදක යන්ත්‍ර භාවිතා නොකරන්න ):

.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}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{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}?v=@{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);
}

මිනිසුන් භාවිතා කිරීමට කැමති සෑම දෙයක්ම හැසිරවීමට මා විසින් නිර්මාණය කරන ලද 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);

ඔබට මෙය ප්‍රයෝජනවත් වේ යැයි සිතමි.

මූලික විසඳුම සොයා ගැනීම සඳහා id ගිඩ්ගිඩෝනිහාට ණය.

මම උත්සාහ කළේ එකම දේ කිරීමටයි. පසුබිම්-වර්ණය සහ පසුබිම්-රූපය වස්තුවක් තුළ වෙනම ස්ථර වල පවතින අතර - එයින් අදහස් වන්නේ ඒවා සහජීවනය කළ හැකි බවයි - CSS ප්‍රමිතීන් පසුබිම්-රූප ස්ථරයට සමපාත වන බව පෙනේ.

මට කිව හැකි දෙයින්, දේශසීමා-රූපයට විවිධ පසුබිම්වලට වඩා පුළුල් සහයෝගයක් ඇති බව පෙනේ, එබැවින් සමහර විට එය විකල්ප ප්‍රවේශයකි.

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

යාවත්කාලීන කිරීම: තව ටිකක් පර්යේෂණ කරන්න. පෙට්‍රා ග්‍රෙගෝරෝවාට මෙහි යමක් ක්‍රියාත්මක වන බව පෙනේ -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

ඔබට බහු පසුබිමක් භාවිතා කළ හැකිය: රේඛීය-ශ්‍රේණිය (); ඇමතුම්, නමුත් මෙය උත්සාහ කරන්න:

වෙනම HTTP ඉල්ලීම් නිසා මූලද්‍රව්‍ය වෙන වෙනම පටවන බවක් නොපෙනෙන තැන පින්තූර සම්පුර්ණයෙන්ම එකට සම්බන්ධ වීමට ඔබට අවශ්‍ය නම් මෙම තාක්ෂණය භාවිතා කරන්න. මෙන්න අපි එකවර පටවන එකම මූලද්රව්යයේ කරුණු දෙකක් පටවන්නෙමු ...

ඔබේ පෙර-විදැහුම් 32-විනිවිද පෙනෙන png රූපය / වයනය මුලින් base64 string බවට පරිවර්තනය කර පසුබිම්-රූප css ඇමතුම තුළ භාවිතා කිරීමට වග බලා ගන්න (මෙම උදාහරණයේ INSERTIMAGEBLOBHERE වෙනුවට).

සම්මත rgba පාරදෘශ්‍යතාව / රේඛීය ශ්‍රේණියේ CSS රීතිය සමඟ අනුක්‍රමිකව සකස් කර ඇති වේෆර් පෙනුමක් ඇති වයනය සහ වෙනත් රූප දත්ත විලයනය කිරීමට මම මෙම තාක්ෂණය භාවිතා කළෙමි. බහු කලාව සැකසීමට සහ ජංගම දුරකථනයට අයහපත් වන 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");
 }

IE 9 (HTML 5 සහ HTML 4.01 දැඩි) හි එකට වැඩ කරන ශ්‍රේණි සහ පසුබිම් රූප ලබා ගැනීමට ඔබට අවශ්‍ය නම්, පහත දැක්වෙන ගුණාංග ප්‍රකාශය ඔබේ CSS පන්තියට එක් කරන්න, එය කළ යුත්තේ උපක්‍රමයයි:

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

ඔබ filterගුණාංගය භාවිතා කරන බවත් progid:[val], අර්ධ සළකුණක් සමඟ ගුණාංගයේ අගය වැසීමට පෙර කොමාවකින් වෙන් කළ අවස්ථා දෙකක් ඇති බවත් සැලකිල්ලට ගන්න . මෙන්න ෆෙඩෙල් . ඔබ ෆෙඩල් දෙස බලන විට ශ්‍රේණිය වටකුරු කොන් වලින් ඔබ්බට විහිදෙන බව සලකන්න. වටකුරු කොන් භාවිතා නොකිරීම සඳහා මට විසඳුමක් නොමැත. Src [IMAGE_URL] ගුණාංගයේ සාපේක්ෂ මාර්ගයක් භාවිතා කරන විට, මාර්ගය ලේඛන පිටුවට සාපේක්ෂ වන අතර එය CSS ගොනුවට නොවේ ( මූලාශ්‍රය බලන්න ).

මෙම ලිපිය ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) මෙම විසඳුමට මා යොමු කරන්නේ එයයි. IE- විශේෂිත CSS3 සඳහා එය බෙහෙවින් උපකාරී වේ.

පසුබිම් රූපය, පසුබිම් ශ්‍රේණියේ සංයෝජනය සමඟ span බොත්තමක් සෑදීමට මට අවශ්‍ය විය.

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

මම ගැටලුව ඒ ආකාරයෙන් විසඳා ගනිමි. මම 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/stackoverflow.jpg");
  height: 100%
}

මගේ ප්‍රතිචාරාත්මක සැලසුම සඳහා, කොටුවේ දකුණු පැත්තේ පහළ-ඊතලය (සිරස් ඇකෝනියන්), ප්‍රතිශතය පිහිටීම ලෙස පිළිගෙන ඇත. මුලදී පහළ ඊතලය "පිහිටීම: නිරපේක්ෂ; දකුණ: 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අවසාන ශ්‍රේණියේ වර්ණයට ගැලපෙන වර්ණයට අනුරූප වන .

ඔබට මෙය තිරයේ පහළට සවි කර ආරම්භක ශ්‍රේණියේ වර්ණයට ගැලපේ.