Arka plan ve arka plan rengi arasındaki fark nedir

Kullanarak bir arka plan rengi belirterek arasındaki fark nedir backgroundve background-color?

Snippet # 1

body { background-color: blue; }

Snippet # 2

body { background: blue; }

Bunların iki ayrı özellik olduğunu öne sürmek, özel örneğinizde sonuçta hiçbir fark yoktur, çünkü backgroundaslında bir kısayol

arka plan rengi
arka plan görüntüsü
arka plan-konumu
arka plan-tekrar
arka plan-eki
arka plan-klip
arka plan kökenli
arka plan boyutu

Böylece, kısayolu background-colorkullanarak, backgroundbaşka bir background-*özelliği bir kereden fazla tekrar etmeden bir veya daha fazla değer ekleyebilirsiniz .

Hangisini seçmeniz esas olarak size bağlıdır, ancak stil bildirimlerinizin belirli koşullarına da bağlı olabilir (örneğin , bir üst öğeden background-colordiğer ilgili background-*özellikleri devralırken yalnızca geçersiz kılmanız veya tüm değerleri kaldırmanız gerekiyorsa) hariç background-color).

backgroundÖnceki tüm geçecek, background-color, background-imagevb özelliklere. Temelde bir steno, ama aynı zamanda bir sıfırlama .

Bazen backgroundaşağıdakileri isteyeceğim şablon özelleştirmelerinde önceki özelliklerin üzerine yazmak için kullanacağım :

background: white url(images/image1.jpg) top left repeat;

Aşağıdaki olmak:

background: black;

Yani, tüm parametreler ( background-image, background-position, background-repeat) varsayılan değerlerine sıfırlanır.

Hakkında CSS performansı :

backgroundvs background-color:

18 renk örneklerinden karşılaştırılması ile bir kez küçük dikdörtgenler olarak bir sayfada 100 kez render arka ve bir kez background-color .

Bu sayılar tek sayfalık bir yeniden yüklemeden olsa da, daha sonraki yenilemelerle oluşturma süreleri değişti, ancak yüzde farkı temelde her seferinde aynıydı.

Bu, Safari 7.0.1'de arka plan rengi yerine arka plan rengi kullanırken neredeyse iki kat daha hızlı olan 42,6 ms'lik bir tasarruftur . Chrome 33 yaklaşık olarak aynı görünüyor.

Bu dürüstçe beni havaya uçurdu çünkü iki nedenden dolayı en uzun süre:

• Genellikle her zaman CSS özelliklerinde, özellikle arka planlarda açıklık için tartışırım çünkü yolda özgüllüğü olumsuz etkileyebilir.
• Bir tarayıcı gördüğünde background: #000;, gerçekten gördüklerini düşündüm background: #000 none no-repeat top center;. Burada bir kaynağa bağlantım yok, ama bunu bir yerde okuduğumu hatırlıyorum.

Ref: https://github.com/mdo/css-perf#background-vs-background-color

İle backgroundaşağıdaki backgroundgibi tüm özellikleri ayarlayabilirsiniz :

• background-color
• background-image
  
• background-repeat
  
• background-position
  vb.

İle background-colorsadece arka planın rengini belirtebilirsiniz

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

Daha fazla bilgi

(Bkz. Başlık: Arkaplan - Steno mülkiyet)

Farklardan biri:

Bir görüntüyü bu şekilde arka plan olarak kullanırsanız:

background: url('Image Path') no-repeat;

"background-color" özelliğiyle geçersiz kılamazsınız.

Ancak bir rengi uygulamak için arka plan kullanıyorsanız, arka plan rengiyle aynıdır ve geçersiz kılınabilir.

örneğin: http://jsfiddle.net/Z57Za/11/ ve http://jsfiddle.net/Z57Za/12/

İkisi de aynı. Orada birden olan arkaplan seçiciler (yani background-color, background-image, background-position) ve daha basit yoluyla ya erişebilirsiniz backgroundseçicinin veya daha fazla özel biri. Örneğin:

background: blue url(/myImage.jpg) no-repeat;

veya

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

Fark, backgroundshorthand özelliğinin arka planla ilgili birkaç özellik ayarlamasıdır. Diğer özellikler, örneğin başlangıç değerlerine, ayarlanır o zamandan beri sadece, örneğin bir renk değeri belirtmek bile hepsini setleri background-imageiçin none.

Bu, söz konusu özellikler için her zaman diğer ayarları geçersiz kılacağı anlamına gelmez. Bu, olağan, genellikle yanlış anlaşılan kurallara göre çağlayana bağlıdır.

Pratikte, steno biraz daha güvenli olma eğilimindedir. Başka bir stil sayfasından yanlışlıkla arka plan görüntüsü gibi bazı beklenmedik arka plan özellikleri elde edilmesine karşı bir önlemdir (tam değil, ancak yararlı). Ayrıca, daha kısa. Ancak bunun "tüm arka plan özelliklerini ayarla" anlamına geldiğini hatırlamanız gerekir.

Fark yok. Her ikisi de aynı şekilde çalışacaktır.

CSS arka plan özellikleri, bir öğenin arka plan efektlerini tanımlamak için kullanılır.

Arka plan efektleri için kullanılan CSS özellikleri:

• arka plan rengi
• arka plan görüntüsü
• background-repeat
• background-attachment
• Arka plan konumlu

Arka plan özelliği bu özelliklerin tümünü içerir ve bunları tek bir satıra yazabilirsiniz.

Bu en iyi cevap. Steno (arka plan) sıfırlama ve NEM ALMA içindir (longhand ile birleştirin).

Bir sayfada 100 kez işlenen 18 renk örneğinin, biri arka planla, diğeri de arka plan rengiyle küçük dikdörtgenler olarak karşılaştırılması.

CSS performans denemesini yeniden oluşturdum ve sonuçlar bugünlerde önemli ölçüde farklı.

background

Chrome 54 : 443 (µs / böl)

Firefox 49 : 162 (µs / böl)

Kenar 10 : 56 (µs / böl)

background-color

Chrome 54 : 449 (µs / böl)

Firefox 49 : 171 (µs / div)

Kenar 10 : 58 (µs / böl)

Gördüğünüz gibi - neredeyse hiçbir fark yok.

backgroundbackground-coloraşağıdaki gibi arka plan ile ilgili diğer şeyler için kısayol ve kısayol :

background-color
background-image
background-repeat
background-attachment
background-position 

W3C'den aşağıdaki ifadeyi okuyun:

Arka plan - stenografi özelliği

Kodu kısaltmak için, tüm arka plan özelliklerini tek bir özellikte belirtmek de mümkündür. Buna steno özellik denir.

Arka plan için stenografi özelliği arka plan:

body {
  background: white url("img_tree.png") no-repeat right top;
}

Stenografi özelliğini kullanırken özellik değerlerinin sırası:

background-color
background-image
background-repeat
background-attachment
background-position

Diğerleri bu sırada olduğu sürece, özellik değerlerinden birinin eksik olup olmadığı önemli değildir.

Arka plan rengiyle bir degrade ayarlayamayacağınızı gördüm.

Bu çalışıyor:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

Bu yapmaz:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

background aşağıdakiler için steno özelliktir:

 - background-color
 - background-image
 - background-repeat
 - background-attachment
 - background-position

Burada her mülk hakkında detaylı bilgi edinebilirsiniz

Emlak siparişi

Tarayıcı uygulamasının çoğunda (belki de eski tarayıcı sorunları sunabilir) özelliklerin sırası önemli değildir, aşağıdakiler hariç:

• background-originve background-clip: bu özelliklerin her ikisi de mevcut olduğunda, birincisi -originve ikincisi -clip.

  Misal:

  background: content-box green padding-box;

  Şuna eşittir:

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-sizeher zaman takip etmeli background-positionve özellikler ile ayrılmalıdır/

• Eğer background-positioniki sayı ile oluşur, birinci bir yatay değer ve ikinci dikey bir değerdir.

Outlook için e-posta oluştururken fark ettim ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

Bununla kalıtımla oynayabileceğinizi anladıktan sonra oldukça düzgün şeyler yapabilirsiniz. Ancak önce bu dokümanın arka planında bir şey anlayalım:

CSS3 ile öğelere birden fazla arka plan uygulayabilirsiniz. Bunlar, üstte sağladığınız ilk arka plan ve arkada listelenen son arka plan ile birbirinin üzerine yerleştirilir. Yalnızca son arka plan bir arka plan rengi içerebilir.

Yani ne zaman biri:

background: red;

Arka plan rengini kırmızıya ayarlıyor çünkü kırmızı, listelenen son değerdir.

Ne zaman biri:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Kırmızı arka plan rengidir bir kez AMA bir degrade göreceksiniz.

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }

    <div class="box">
      
     </div>

Şimdi arka plan rengi ile aynı şey:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }

    <div class="box">
      
     </div>

Bunun nedeni, bunu yaparken:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

Son sayı, arka plan rengini ayarlar.

Daha önce arka plandan (daha sonra degradeyi elde ederiz) veya arka plan renginden miras almadan önce kırmızı oluruz.

Belgelerde görmediğimi fark ettiğim bir şey, background: url("image.png")

Görüntü bulunmazsa yukarıdaki gibi kısa el, kullandığınız gibi yok sayılmak yerine 302 kodu gönderir

background-image: url("image.png") 

Arka plan ve arka plan rengiyle ilgili bir hata var

bunun farkı, arka planı kullanırken, bazen CSS arka planında bir web sayfası oluştururken: #fff // bir Maske görüntüsü bloğuna ("üst öğe, metin veya resim") binebilir. Güvenli kullanım için renk, tasarımınız kendi