Gövde üzerinde ayarlanan CSS3 gradyan arka planı gerilmez, bunun yerine tekrar eder mi?

429

Tamam <body>toplam 300px yüksek içindeki içeriği söyle .

Ben benim arka planını ayarlarsanız <body>kullanarak -webkit-gradientveya-moz-linear-gradient

Sonra penceremi en üst düzeye çıkarıyorum (veya sadece 300 pikselden daha uzun yapıyorum) degrade tam olarak 300 piksel yüksekliğinde (içeriğin yüksekliği) olacak ve pencerenin geri kalanını doldurmak için tekrarlayacağım.

Hem webkit hem de gecko'da aynı olduğu için bunun bir hata olmadığını varsayıyorum.

Ancak, degradeyi tekrar yerine pencereyi dolduracak şekilde uzatmanın bir yolu var mı?

css gradient

— JD Isaacks
kaynak

717

Aşağıdaki CSS'yi uygulayın:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Düzenleme:margin: 0; Yorumlar başına gövde bildirimine eklendi ( Martin ).

Düzenleme:background-attachment: fixed; Yorumlar başına gövde bildirimine eklendi ( Johe Green ).

— Bryan Downing
kaynak

4

Ayrıca eklemem gerektiğini öğrendim margin:0;, bodyyoksa sayfamın altında bir boşluk var.

— Martin

8

Chrome ve Safari'de, gövde {height:% 100}, sayfanın (degradenin değil) görünüm penceresinin dışına taşmasına neden olur.

— thSoft

13

Bir arka plan eki eklemek zorunda kaldım: sabit; alt boşluktan kurtulmak için vücuda (Webkit).

— j7nn7k

4

Gövde için bir arka plan ve ardından html etiketinin yüksekliğini% 100'e ayarlamak Internet Explorer'da garip şeyler yapar. İşte bir örnek (png).

— Justin Force

21

Emin olun background-repeatve background-attachmentgelip sonra da backgroundkurallara. Aksi takdirde, arka plan yine de tekrarlanabilir.

— kellen

159

Ayarlayarak bir önceki cevabı ile ilgili olarak htmlve bodyhiç height: 100%içerik ihtiyaçları varsa kaydırma işin görünmüyor. fixedArka plana eklemek bunu düzeltiyor gibi görünüyor - hayırneed for height: 100%;

Örneğin:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

Snippet'i genişlet

— Joshua Rudd
kaynak

5

Bu, test ettiğim her tarayıcıda (Chrome [Mac], Safari [Mac], Firefox [Mac / Win7], IE9 [Win7] ve Opera [Mac]) "yükseklik:% 100" kaydırma çubuğu yan etkisi olmadan çalıştı çözüm. Teşekkürler!

— pipwerks

7

Sass / Compass kullanan kişiler için bir not. Doğrudan sabit olarak "sabit" ayarlayamazsınız, böylece sabit eklemek için özelliği ekleyinbackground-attachment: fixed

— Kyle Mathews

2

Arka planın pencereyi doldurmasını veya içeriği (hangisi daha büyükse) kullanmak min-height:100%

— istiyorsanız

Pusula kullanarak aşağıdaki kodu yürütmek başardı: @ include arka plan (üst, kırmızı,% 0, mavi% 100) sabit);

— mcranston18

Nasıl üçüncü bir renk eklerim?

— sbaden

17

Partiye geç kaldığımı biliyorum, ama işte daha sağlam bir cevap.

Tek yapmanız gereken min-height: 100%;yerine kullanmaktır height: 100%;ve degrade arka planınız, kaydırılabilir olsa bile görünüm penceresinin tüm yüksekliğini tekrarlamadan genişletir.

Bunun gibi:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}

— Ricardo Zea
kaynak

Html yüksekliğini% 100'e ayarlamanız gerekmedikçe, örneğin yapışkan altbilgiye ihtiyacınız varsa

— apieceofbart

15

İşte bu sorunu çözmek için yaptığım şey ... içeriğin tam uzunluğu için degradeyi gösterecek, daha sonra arka plan rengine (normalde degradedeki son renk) geri dönecektir.

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }

<body>
  <h1>Hello world!</h1>
</body>

Snippet'i genişlet

Bunu FireFox 3.6, Safari 4 ve Chrome'da test ettim, bazı nedenlerden dolayı HTML etiketini şekillendirmeyi desteklemeyen tarayıcılar için arka plan rengini gövdede tutuyorum.

— John Sanford
kaynak

13

Ayar html { height: 100%}IE ile tahribat yaratabilir. İşte bir örnek (png). Ama neyin işe yaradığını biliyor musun? <html>Etikette arka planınızı ayarlamanız yeterlidir.

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

Arka plan alta kadar uzanıyor ve garip kaydırma davranışı oluşmuyor. Diğer tüm düzeltmeleri atlayabilirsiniz. Ve bu geniş çapta desteklenmektedir. Html etiketine arka plan uygulamanıza izin vermeyen bir tarayıcı bulamadım. Tamamen geçerli CSS ve bir süredir. :)

— Justin Force
kaynak

1

@Lynda Bu çok yardımcı bir geri bildirim değil. İşe yaramadığı bir dava sunmayı düşünür müsünüz?

— Justin Force

Belirsiz olduğum için üzgünüm. Neden işe yaramadığından emin değilim. Degrade ekleyebilirsiniz, htmlancak benim durumumda sayfanın aşağısında kısmen durur. Eklemek background-attachment:fixedsorunu çözüyor. Bunun birden fazla sitede olduğunu gördüm, ancak sebebini bulamadım.

— L84

Bu çözümün amacı, tarayıcılarda (2012'de bu arada) çalışmasıdır. Ama yine de hangi tarayıcıdan bahsettiğinizi belirtmiyorsunuz. Hâlâ sorun yaşıyorsanız eklemeyi deneyin html, body { height: 100%; }.

— Justin Force

Doğru. Firefox ve Chrome'da (diğer tarayıcılarda test etmedi) olur ve herhangi bir şans olmadan yükseklik ve çeşitli diğer ayarları denedim (arka plan eki hariç). Oh, önemli değil ve umarım cevabınız hala çoğu için işe yarıyor. =>

— L84

Hala tekrar ve sabit olmadan kandırmak zorunda.

— MarsAndBack

12

Bu sayfada çok sayıda kısmi bilgi var, ancak tam bir bilgi yok. İşte yaptığım şey:

Burada bir degrade oluşturun: http://www.colorzilla.com/gradient-editor/
Gradyanı BODY yerine HTML'de ayarlayın.
Arka planı HTML'de "background-attachment: fixed;" ile düzeltin.
BODY'de üst ve alt kenar boşluklarını kapatma
(isteğe bağlı) Genellikle <DIV id='container'>tüm içeriğimi koyduğum bir içerik oluştururum

İşte bir örnek:

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

Bu, çeşitli boyutlarda ve kaydırma gereksinimli sayfalarda IE, Chrome ve Firefox ile test edilmiştir.

— Rick Smith
kaynak

1

Harika! Colorzilla kullanıyordum ve ana cevap benim için işe yaramadı. Bunu yaptı. Teşekkür ederim! :)

— Filly

Neden bunu BODY'de değil de HTML'de yapmayı tercih ediyorsunuz?

— sashaikevich

@sashaikevich Harika bir soru. 5 yıldır bu cevaba pek bakmadım, bu yüzden hiç hatırlamıyorum. Bunu yapmamın nedeni hala tüm tarayıcı güncellemelerinde geçerli olmayabilir. Eğer hepsini vücuda taşırsanız, aynı şekilde çalışıp çalışmadığını merak ederdim.

— Rick Smith

@ RickSmith Hayır, ben html tarz. Ancak, şimdi kontrol etmek için vücuda uygulamak için kuralları hareket ettirdim ve bu hiçbir fark yaratmadı. Belki eski bir tarayıcı şeydi ...

— sashaikevich

4

Kirli; belki sadece bir min yükseklik ekleyebilirsiniz:% 100; html ve gövde etiketlerine? Bu veya en azından bitiş gradyan rengi olan varsayılan bir arka plan rengi ayarlayın.

— subv3rsion
kaynak

1

Degrade sonu rengi olarak ayarlanan varsayılan arka plan, degrade durduysa harika bir çözüm olurdu, ancak tekrarlamayı durdurmaz, böylece varsayılan arka plan yalnızca degrade desteklenmiyorsa görünecektir.

— JD Isaacks

2

Burada cevapları almakta zorlandım.
Vücuttaki tam boyutlu bir div'ı düzeltmenin, negatif bir z-endeksi vermenin ve degradeyi ona eklemenin daha iyi çalıştığını buldum.

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

İşte tam bir örnek https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

— morefromalan
kaynak

0

Bu CSS kodunu kullandım ve benim için çalıştı:

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

İlgili bir bilgi, http://www.colorzilla.com/gradient-editor/ adresinde kendi harika renk geçişlerinizi oluşturabilmenizdir.

/ Sten

— Netsi1964
kaynak

-1

background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;

— Joe
kaynak

1

Lütfen çözümünüzün temel yönleri hakkında biraz açıklama ekleyin.

— Rachcha

-1

yaptığım şey bu:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

vücudu yüzmeden önce, üstte bir boşluk vardı ve html'nin arka plan rengini gösteriyordu. html'nin bgcolor'unu kaldırırsam, aşağı kaydırdığımda degrade kesilir. bu yüzden vücudu yüzdüm ve konumunu göreceli olarak ve genişliği% 100 olarak ayarladım. safari, krom, firefox, opera, internet expl üzerinde çalıştı .. oh bekleyin. : P

siz ne düşünüyorsunuz?

— grizzy
kaynak

-4

% 100 yerine sadece bazı piksel eklemek şimdi bu var ve boşluk olmadan tüm sayfa için çalışır:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

— SANDER
kaynak

3

1420 pikselden büyük sayfalar ne olacak?

— veritas