Bir arka plan resmi ve CSS3 gradyanını aynı öğede nasıl birleştiririm?

Benim için CSS3 gradyanlarını nasıl kullanırım background-colorve ardından bir background-imagetür hafif şeffaf doku uygulamak için a'yı nasıl uygulayabilirim?

Birden fazla arka plan!

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

Bu 2 satır, degradeler yapmayan herhangi bir tarayıcı için yedek. Aşağıdaki görüntüleri yalnızca IE <9 yığınlamak için notlara bakın.

• Satır 1, düz bir arka plan rengi belirler.
• Satır 2, arka plan görüntüsü yedekini ayarlar.

Son satır, tarayıcılar için bunları işleyebilecek bir arka plan resmi ve degrade belirler.

• Satır 3 tüm modern tarayıcılar içindir.

Neredeyse tüm mevcut tarayıcılar birden çok arka plan görüntüsü ve css arka planı için desteğe sahiptir. Tarayıcı desteği için http://caniuse.com/#feat=css-gradients adresine bakın . Neden birden çok tarayıcı ön ekine ihtiyacınız olmadığına dair iyi bir yazı için bkz. Http://codepen.io/thebabydino/full/pjxVWp/

Katman Yığını

İlk tanımlanan görüntünün yığın içinde en üstte olacağına dikkat edilmelidir. Bu durumda, görüntü degradenin ÜST'ünde bulunur.

Arka plan katmanlama hakkında daha fazla bilgi için bkz. Http://www.w3.org/TR/css3-background/#layering .

Görüntüleri YALNIZCA istifleme (bildirimde gradyan yok) IE <9 için

IE9 ve üstü görüntüleri aynı şekilde istifleyebilir. Bunu kişisel olarak yapmamam da, yani 9 için bir degrade görüntü oluşturmak için kullanabilirsiniz. Ancak, yalnızca görüntüler kullanılırken dikkat edilmesi gereken, yani <9, geri dönüş deyimini yoksayar ve herhangi bir görüntü göstermez. Bir degrade eklendiğinde bu gerçekleşmez. Bu durumda tek bir yedek resim kullanmak için , yedek kodunuzla birlikte Paul Irish'ın harika Koşullu HTML öğesini kullanmanızı öneririz :

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

Arka plan konumu, boyutlandırma vb.

Tek bir görüntüye uygulanacak diğer özellikler de virgülle ayrılmış olabilir. Yalnızca 1 değer sağlanırsa, bu, degrade dahil tüm yığınlanmış resimlere uygulanır. background-size: 40px;hem görüntüyü hem de degradeyi 40 piksel yükseklik ve genişlikle sınırlar. Ancak kullanmak background-size: 40px, cover;görüntüyü 40 piksel yapar ve degrade öğeyi kaplar. Bir görüntüye yalnızca bir ayar uygulamak için diğeri için varsayılanı ayarlayın: background-position: 50%, 0 0;veya görüntüyü destekleyen tarayıcılar için initial:background-position: 50%, initial;

Arka planı kısayolla da kullanabilirsiniz, ancak bu, yedek rengi ve görüntüyü kaldırır.

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

Aynı durum arka plan konumu, arka plan tekrarı vb. İçin de geçerlidir.

Resminiz için arka plan konumu da ayarlamak istiyorsanız, bunu kullanabilirsiniz:

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

veya daha az bir LIX karışımı da oluşturabilirsiniz (bootstrap stili):

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

Gerçekleştirilmesi gereken bir şey, ilk tanımlanan arka plan görüntüsünün yığının içinde en üstte olmasıdır. En son tanımlanan görüntü en alttaki olacaktır. Bu, bir görüntünün arkasında bir arka plan gradyanı olması için şunlara ihtiyacınız olacaktır:

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

Görüntüler için arka plan konumları ve arka plan boyutu da tanımlayabilirsiniz. CSS3 gradyanlarıyla yapabileceğiniz bazı ilginç şeyler hakkında bir blog yazısı hazırladım

yazmanız yeterlidir:

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

Çalışmasını sağlamak için her zaman aşağıdaki kodu kullanın. Bazı notlar var:

1. Resim URL'sini degradeden önce yerleştirirseniz, bu resim degradenin üstünde beklendiği gibi görüntülenir .

.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. Degradeyi resim URL'sinin önüne yerleştirirseniz, bu resim degradenin altında görüntülenir .

.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>

Bu teknik, burada açıklandığı gibi birden fazla arka plan resmimizle aynı

çözümüm:

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

Bu tekniği bir adım daha ileri götürmem gereken bir uygulamam vardı ve çalışmalarımı özetlemek istedim. Aşağıdaki kod aynı şeyi yapar ancak SASS, Bourbon ve bir resim hareketli grafiği kullanır.

    @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 ve Bourbon çapraz tarayıcı koduyla ilgileniyor ve şimdi tüm beyan etmem gereken düğme başına sprite konumudur. Aktif ve fareyle üzerine gelme durumları için bu prensibi genişletmek kolaydır.

Arka plan resimlerini indirirken garip hatalarınız varsa W3C Link denetleyicisini kullanın: https://validator.w3.org/checklink

İşte kullandığım modern mixins (kredi: PSA: degrade jeneratörleri kullanmayın ):

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

İşte insanların kullanmak isteyebilecekleri her şeyi işlemek için oluşturduğum bir 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 */
}

Bu şu şekilde kullanılabilir:

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

Umarım bunu faydalı bulursunuz.

ilk çözümü bulmak için @Gidgidonihah'a teşekkür ederiz.

Aynı şeyi yapmaya çalışıyordum. Arka plan rengi ve arka plan görüntüsü, bir nesnenin içindeki ayrı katmanlarda (bir arada var olabildikleri anlamına gelir) mevcut olsa da, CSS gradyanları arka plan görüntüsü katmanını birlikte tercih ediyor gibi görünmektedir.

Söyleyebileceğim kadarıyla, sınır görüntüsünün birden fazla arka plandan daha geniş bir desteği var gibi görünüyor, bu yüzden belki de alternatif bir yaklaşım.

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

GÜNCELLEME: Biraz daha araştırma. Petra Gregorova'nın burada çalışan bir şeyi var gibi görünüyor -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Birden fazla arka plan kullanabilirsiniz: linear-gradient (); çağırır, ancak şunu deneyin:

Görüntülerin, ayrı HTTP istekleri nedeniyle öğelerin ayrı yüklenmediği yerlerde tamamen kaynaşmasını istiyorsanız, bu tekniği kullanın. Burada aynı öğeye aynı anda yükleyen iki şey yüklüyoruz ...

Önceden oluşturulmuş 32 bit şeffaf png resminizi / dokunuzu önce base64 dizesine dönüştürdüğünüzden ve arka plan resmi css çağrısında (bu örnekte INSERTIMAGEBLOBHERE yerine) kullandığınızdan emin olun.

Bu tekniği standart bir rgba şeffaflığı / doğrusal gradyan css kuralı ile serileştirilmiş gofret görünümlü doku ve diğer görüntü verilerini birleştirmek için kullandım. Birden çok resim katmanlamaktan ve mobil cihazlar için kötü olan HTTP isteklerini boşa harcamaktan daha iyi çalışır. Her şey istemci tarafında yüklenir ve dosya işlemi gerekmez, ancak belge bayt boyutunu artırır.

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

Degradelerin ve arka plan görüntülerinin IE 9'da (HTML 5 ve HTML 4.01 Katı) birlikte çalışması gerekiyorsa, css sınıfınıza aşağıdaki öznitelik bildirimini ekleyin ve hile yapması gerekir:

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

filterÖzniteliği kullandığınıza progid:[val]ve öznitelik değerini noktalı virgülle kapatmadan önce virgülle ayrılmış iki örnek bulunduğuna dikkat edin . İşte keman . Ayrıca, kemana baktığınızda eğimin yuvarlatılmış köşelerin ötesine uzandığını unutmayın. Yuvarlatılmış köşeleri kullanmayanlar için bir çözümüm yok. Ayrıca src [IMAGE_URL] özniteliğinde göreceli bir yol kullanırken, yolun css dosyasına değil, belge sayfasına göreli olduğuna dikkat edin (bkz. Kaynak ).

Bu makale ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) beni bu çözüme götüren şeydir. IE'ye özgü CSS3 için oldukça yararlı.

Arka plan görüntüsü, arka plan gradyan kombinasyonu ile span düğmesi yapmak istedim.

http://enjoycss.com/ iş görevimi yapmamda yardımcı oldu. Sadece bazı otomatik oluşturulan ek CSS kaldırmak zorundayım. Ama gerçekten güzel bir site sıfırdan çalışma oluşturmak.

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

Sorunu bu şekilde çözüyorum. Gradyanı HTML'de ve arka plan resmini Gövde'de tanımlarım

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

Duyarlı tasarımım için, kutunun sağ tarafındaki açılır kutu aşağı okum (dikey akordeon), yüzde olarak konum olarak kabul edildi. Başlangıçta aşağı ok "konum: mutlak; sağ: 13 piksel;" idi. % 97 konumlandırma ile cazibe gibi çalıştı:

> 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 Maalesef filtreleri nasıl kullanacağınızı bilmiyorum.

Kesin bir yöntem olarak, csskullanımınızda 500x5 piksel diyen bir arka plan resmi oluşturabilirsiniz :

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

Burada xxxxxxson degrade rengiyle eşleşen renge karşılık gelir.

Bunu ekranın altına da düzeltebilir ve ilk degrade rengiyle eşleştirmesini sağlayabilirsiniz.