files/pl/web/css/background-color/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

---
title: background-color
slug: Web/CSS/background-color
tags:
  - CSS
  - CSS Background
  - CSS Property
  - Reference
translation_of: Web/CSS/background-color
---
<p>{{ CSSRef() }}</p>

<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2>

<p><code>Właściwość CSS <strong>background-color</strong></code> ustawia kolor tła elementu, albo poprzez wartość koloru lub słowo kluczowe <em><code>transparent</code></em>.</p>

<p>{{cssinfo}}</p>

<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2>

<p>Właściwość <strong>background-color</strong> jest deklarowana jako pojedyncza wartość &lt;color&gt;.</p>

<pre class="eval">background-color: <em>color</em> | transparent | inherit
</pre>

<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3>

<dl>
 <dt>{{cssxref("&lt;color&gt;")}}</dt>
 <dd>Jest to styl CSS, który opisuje zunifikowany kolor tła. Nawet jeśli jest zdefiniowany jeden lub kilka {{cssxref("background-image")}}, kolor może być renderowany, poprzez przezroczystość o ile nie jest ustawiony jako opaque. W CSS <em>transparent</em> jest kolorem.</dd>
 <dd>Kolor może być określony jako szesnastkowa wartość RGB np. #ffaac9, typowa wartość RGB np.
 <pre><code>rgb(255, 255, 128);</code></pre>
  lub poprzez użycie jednego z predefiniowanych słów kluczowych określających kolor.</dd>
 <dt>transparent </dt>
 <dd>Domyślną wartością dla <strong><code>background-color</code></strong> jest <em><code>transparent</code></em>, oznacza to, że element nie ma własnego koloru tła, zamiast tego renderowany jest kolor tła rodzica.</dd>
</dl>

<h2 id="Przykłady">Przykłady</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="exampleone"&gt;
 Lorem ipsum dolor sit amet, consectetuer
&lt;/div&gt;

&lt;div class="exampletwo"&gt;
  Lorem ipsum dolor sit amet, consectetuer
&lt;/div&gt;

&lt;div class="examplethree"&gt;
  Lorem ipsum dolor sit amet, consectetuer
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight:[2,7,12,17];">.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153,102,153);
  color: rgb(255,255,204);
}

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}
</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Examples","200","150")}}</p>

<h2 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS 1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color">CSS 2.1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color">CSS 3</a></li>
</ul>