Soru Vücutta ayarlanmış CSS3 gradyan arka planı gerilmez ama yerine tekrarlanır?


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

Arka planımı ayarlarsam <body> kullanma -webkit-gradient veya -moz-linear-gradient

Sonra penceremi en üst düzeye çıkarırım (ya da 300px'den daha uzun), degrade tam olarak 300 piksel uzunluğunda (içeriğin yüksekliği) olacak ve sadece pencerenin geri kalanını doldurmak için tekrarlayacaktır.

Her iki webkit ve gecko'da aynı olduğundan, bunun bir hata olmadığı varsayılmaktadır.

Ancak, tekrar yerine streç pencereyi doldurmak için bir yol var mı?


358
2018-05-19 20:40


Menşei




Cevaplar:


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

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

Düzenle: Katma margin: 0; yorum başına vücut beyanına (kırlangıç).

Düzenle: Katma background-attachment: fixed; yorum başına vücut beyanına (Johe Green).


592
2018-05-19 22:55



Ayrıca eklemem gerektiğini öğrendim. margin:0; üzerinde body ya da sayfamın altında bir boşluk var. - Martin
Chrome ve Safari'de, gövde {height: 100%}, görünüm penceresinden dışarı uzanan sayfada (ancak degradeyi değil) sonuçlanır. - thSoft
Bir arka plan eki eklemek zorunda kaldım: sabit; taban boşluğundan kurtulmak için vücuda (Webkit). - j7nn7k
Gövdenin arka planını ve sonra html etiketinin yüksekliğini% 100'e ayarlamak Internet Explorer'da garip şeyler yapar. İşte bir örnek (png). - Justin Force
Emin olun background-repeat ve background-attachment Hadi sonra sizin background kurallar. Aksi halde, arka plan yine de yinelenebilir. - kellen


Önceki bir cevaba göre, ayar html ve body için height: 100% İçeriğin kaydırılması gerekirse işe yaramaz. Ekleme fixed arka plana düzeltmek gibi görünüyor - hayır need for height: 100%;

Örneğin.:

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


147
2017-07-20 21:15



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ım. çözüm. Teşekkürler! - pipwerks
Sass / Compass kullanan kişiler için bir not. Sabit eklemek için doğrudan "sabit" ayarlayamazsınız, böylece mülk ekleyin background-attachment: fixed - Kyle Mathews
Arka planın pencereyi veya içeriği (hangisi büyükse) doldurmasını istiyorsanız o zaman kullanın. min-height:100% (uyumlu tarayıcılarda) - cjk
Compass: @include background (lineer gradyan (üst, kırmızı% 0, mavi% 100) sabit) kullanarak aşağıdaki kodu çalıştırabildim; - mcranston18
Üçüncü bir rengi nasıl eklerim? - sbaden


İş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>

Bunu FireFox 3.6, Safari 4 ve Chrome'da test ettim, herhangi bir nedenle HTML etiketinin stilini desteklemeyen herhangi bir tarayıcı için arka plan rengini vücutta tutuyorum.


15
2018-05-21 15:02





Ayar html { height: 100%} IE ile hasara yol açabilir. İşte bir örnek (png). Ama neyin harika olduğunu biliyor musun? Sadece arka planını ayarla <html> etiket.

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

Arkaplan dibe uzanır ve garip bir kaydırma davranışı gerçekleşmez. Diğer tüm düzeltmeleri atlayabilirsiniz. Ve bu geniş bir şekilde destekleniyor. Html etiketine bir arka plan uygulamanıza izin vermeyen bir tarayıcı bulamadım. Tamamen geçerli CSS ve bir süredir var. :)


13
2018-05-11 16:33



Bu her durumda işe yaramıyor. - L84
@Lynda Bu çok yardımcı bir geri bildirim değil. İşe yaramayacak bir vaka sunabilir misiniz? - Justin Force
Belirsiz olduğum için üzgünüm. Neden çalışmadığından emin değilim. İçin bir degrade ekleyebilirsiniz html ama benim durumumda sayfanın aşağı kısmına iner. Ekleme background-attachment:fixed sorunu çözüyor. Bunun birden fazla sitede olduğunu gördüm, ancak sebebini bulamadım. - L84
Bu çözümün amacı, tarayıcılarda (bu arada, 2012'de) çalışmasıydı. Ancak hala hangi tarayıcı hakkında konuştuğunuzu belirtmiyorsunuz. Hala sorun yaşıyorsanız eklemeyi deneyin. html, body { height: 100%; }. - Justin Force
Doğru. Firefox ve Chrome'da (diğer tarayıcılarda test yapmadı) gerçekleşir ve herhangi bir şans olmaksızın yükseklik ve çeşitli diğer ayarları denedim (arka plan eki hariç). Pekala, büyük bir anlaşma değil ve umarım cevabınız hala en çok işe yarar. => - L84


Bu sayfada çok fazla kısmi bilgi var, ancak eksiksiz değil. İşte yaptığım şey:

  1. Burada bir degrade oluşturun: http://www.colorzilla.com/gradient-editor/
  2. BODY yerine HTML'de degrade ayarlayın.
  3. HTML'de arkaplanı "background-attachment: fixed;" ile düzeltin
  4. BODY'deki üst ve alt kenar boşluklarını kapatma
  5. (isteğe bağlı) Genellikle bir <DIV id='container'> İçeriğimin tamamını koyduğum

İş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 gereksinimindeki sayfalarda IE, Chrome ve Firefox ile test edilmiştir.


10
2017-07-29 18:48



Harika! Colorzilla kullanıyordum ve ana cevap benim için çalışmadı. Bu yaptı. Teşekkür ederim! :) - Filly
Tercihiniz neden BODY değil HTML'de yapılıyor? - sashaikevich
@sashaikevich Harika bir soru. Bu cevaba 5 yıldır hiç bakmadım, o yüzden hiç hatırlamıyorum. Yapmamın nedeni hala tüm tarayıcı güncellemeleriyle geçerli olmayabilir. Eğer hepsini vücuda taşıdıysan, aynı işe yarayıp yaramayacağını merak ederdim. - Rick Smith
@RickSmith Hayır, ben html tarz. Ama kuralları kontrol etmek için şimdi bedene uygulanacak kuralları değiştirdim ve bu hiç farketmedi. Belki eski bir tarayıcı olayıydı ... - sashaikevich


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

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

Bunun gibi:

html {
    min-height: 100%;
}

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

10
2018-02-03 23:47



Eğer html yüksekliğini% 100 olarak ayarlamanız gerekmiyorsa, örneğin yapışkan altbilgiye ihtiyacınız varsa - apieceofbart


Kirli; belki bir min yüksekliği ekleyebilir misiniz:% 100; html ve beden etiketlerine mi? Bu veya en azından son degrade rengi olan bir varsayılan arka plan rengini ayarlayın.


3
2018-05-19 20:57



Eğim durduysa, son degrade rengi olarak ayarlanan varsayılan arka plan harika bir çözüm olacaktır, ancak yalnızca arka planı durdurmaz, böylece varsayılan arka plan yalnızca gradyan desteklenmiyorsa görünür. - JD Isaacks


Burada çalışmak için cevapları almakta zorlandım.
Vücutta tam boy bir div düzeltmek, negatif bir z-endeksi vermek ve degradeyi ona eklemek için daha iyi çalıştım.

<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


2
2018-04-18 22:20





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;

-1
2018-04-26 14:24



Lütfen çözümünüzün önemli yönlerine dair bir açıklama ekleyin. - Rachcha


Yaptığım şey buydu:

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 süzmeden önce üstte bir boşluk vardı ve html'nin arka plan rengini gösteriyordu. html'nin bg rengini kaldırırsam, aşağı kaydırdığımda degrade kesilir. Böylece vücudu süzüldü ve göreceli ve genişliğini% 100 olarak ayarladı. safari, krom, firefox, opera, internet expl üzerinde çalıştı .. oh bekle. : P

siz ne düşünüyorsunuz


-1
2017-07-18 16:14