Ek sınıflar/stillerle bir CSS3 arka planı eklemek mümkün mü?

Question

Bugün CSS3'ün multiple backgrounds desteklerini öğrendim, bu harika bir şey. Ne gibi gerçekten istiyorum, EG anında birden fazla arka plan birleştirmek yeteneğidir:

.Watermarked{ 
    background: url('text/logo.png') bottom right no-repeat; 
} 

HTML: Of

background: url('text/logo.png') bottom right no-repeat, 
      url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;  

:

<div class="Watermarked" 
    style="background:url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;"> 
... 

nasılsa bilgisayarlı stilini oluşturan Tabii ekstra arka plan stili kodlayabilir veya jquery kullanarak ekleyebilirsiniz. Ben bu tatlı, saf, sadece CSS çözümünü arıyorum.

saf CSS thirtydot Kabul Cevaplı cevaplayan "Yapamazsın".

Size (3.1 Raylar, vs) SASS ile çalışıyorsanız, kodlanmış stilleri değişken kullanımı yoluyla daha lezzetli olduklarını vurgulayarak değer: Sen CSS ile bunu yapamaz

$watermarkImage: url('text/logo.png') left top no-repeat; 
... 
#very_pretty_sunset{ 
    background: $watermarkImage, url('photos/very_pretty_sunset.png') right bottom no-repeat; 
} 

Answer 1

. Hangisi background

tamamen diğeri geçersiz olacak specificity yüksek ile bildirilir.

Answer 2

div ÖN

1. width = img genişliği - border-image img width div
2. height = img yüksekliği - border-image img height
3. border-image img yükseklik = border-bottom-width
4. border-image img width = border-right-width
5. sizin sınır görüntü

   .Watermarked { 
       -moz-border-image: url('text/logo.png') 0 100% 100% 0; 
       -webkit-border-image: url('text/logo.png') 0 100% 100% 0; 
       -o-border-image: url('text/logo.png') 0 100% 100% 0; 
       border-image: url('text/logo.png') 0 100% 100% 0; 
   } 
   

   
   

   ---

   box-sizing alternatif

CSS saydam (bariz) olmalıdır

---

ÖN

1. border-bottom-width = logo.png yüksekliği
2. border-right-width = logosu.png
3. sizin sınır görüntü (isteğe bağlı)

CSS

.Watermarked { 
    -moz-border-image: url('text/logo.png') 0 100% 100% 0; 
    -webkit-border-image: url('text/logo.png') 0 100% 100% 0; 
    -o-border-image: url('text/logo.png') 0 100% 100% 0; 
    border-image: url('text/logo.png') 0 100% 100% 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:  border-box; 
} 

Answer 3

Sözde seçiciler şeffaf olmalıdır genişliği: önce veya a yeni arka plan katmanı

/* This is your element that needs an additional background */ 
.myElement { 
    position: relative; 
    z-index: 1; 
} 
/* This is your background layer */ 
.myElement:before { 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: /* Define your bg */; 
} 

eklemek için kullanılabilir sonra