-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathMau_ne_va_gradient.htm
More file actions
200 lines (197 loc) · 62.2 KB
/
Mau_ne_va_gradient.htm
File metadata and controls
200 lines (197 loc) · 62.2 KB
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/e503160baa2cd0f0.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-457dc077475af9ee.js"/><script src="/_next/static/chunks/4bd1b696-3cf1b1127452a604.js" async=""></script><script src="/_next/static/chunks/517-6cbbb564b6b7a65d.js" async=""></script><script src="/_next/static/chunks/main-app-8eb68113308ecd14.js" async=""></script><script src="/_next/static/chunks/app/layout-40e71d42d3ccdee8.js" async=""></script><script src="/_next/static/chunks/839-150b5850706a66a5.js" async=""></script><script src="/_next/static/chunks/664-604679c007c3b6d5.js" async=""></script><script src="/_next/static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js" async=""></script><meta name="next-size-adjust"/><title>Tài liệu HTML,CSS,JS - (Background)</title><meta name="description" content="# Các Thuộc Tính CSS Liên Quan Đến Background và Gradient
CSS cung cấp một loạt các thuộc tính để điều chỉnh nền của các phần tử trên trang web, bao gồm cả các..."/><meta property="og:title" content="Tài liệu HTML,CSS,JS - (Background)"/><meta property="og:description" content="# Các Thuộc Tính CSS Liên Quan Đến Background và Gradient
CSS cung cấp một loạt các thuộc tính để điều chỉnh nền của các phần tử trên trang web, bao gồm cả các..."/><meta property="og:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta property="og:image:alt" content="Tài liệu HTML,CSS,JS - (Background)"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2024-12-10T07:59:53.455Z"/><meta property="article:author" content="zunohoang"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Tài liệu HTML,CSS,JS - (Background)"/><meta name="twitter:description" content="# Các Thuộc Tính CSS Liên Quan Đến Background và Gradient
CSS cung cấp một loạt các thuộc tính để điều chỉnh nền của các phần tử trên trang web, bao gồm cả các..."/><meta name="twitter:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta name="twitter:image:alt" content="Tài liệu HTML,CSS,JS - (Background)"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_1e4310 __variable_c3aa02 antialiased"><main class="container mx-auto px-4 pt-2 py-8"><header class="mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between"><div><h1 class="text-3xl font-bold">Tài liệu HTML,CSS,JS - (Background)</h1><p class="text-gray-600">Đăng bởi <i>zunohoang</i> vào <time dateTime="2024-12-10T07:59:53.455Z">12/10/2024</time></p></div><p>👁️ <!-- -->41<!-- --> lượt xem</p></header><article><div class="markdown-body bg-white p-6 rounded-lg"><h1 class="text-3xl font-bold mb-4 pb-2 border-b">Các Thuộc Tính CSS Liên Quan Đến Background và Gradient</h1>
<p class="mb-4">CSS cung cấp một loạt các thuộc tính để điều chỉnh nền của các phần tử trên trang web, bao gồm cả các hiệu ứng gradient. Dưới đây là tất cả các thuộc tính chính liên quan đến background và gradient.</p>
<h2 class="text-2xl font-bold mt-6 mb-4">1. <code class="bg-gray-100 rounded px-1 py-0.5">background</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background</code> là một thuộc tính tổng hợp, cho phép bạn thiết lập tất cả các thuộc tính nền trong một dòng.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token hexcode color">#ff5733</span><span> </span><span class="token" style="color:#dcdcaa">url</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">'image.jpg'</span><span class="token" style="color:#d4d4d4">)</span><span> no-repeat center center fixed</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể bao gồm:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Màu nền (ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">#ff5733</code>).</li>
<li class="mb-1">Hình ảnh nền (ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">url('image.jpg')</code>).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">no-repeat</code>: Không lặp lại hình ảnh nền.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">repeat</code>: Lặp lại hình ảnh nền.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">center</code>: Căn giữa hình ảnh nền.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">fixed</code>: Đặt hình ảnh nền cố định khi cuộn trang.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">2. <code class="bg-gray-100 rounded px-1 py-0.5">background-color</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-color</code> dùng để thiết lập màu nền của phần tử.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-color</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token color">lightblue</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Tên màu (ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">red</code>, <code class="bg-gray-100 rounded px-1 py-0.5">blue</code>, <code class="bg-gray-100 rounded px-1 py-0.5">green</code>).</li>
<li class="mb-1">Mã màu hex (ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">#ff5733</code>).</li>
<li class="mb-1">Giá trị RGB (ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">rgb(255, 0, 0)</code>).</li>
<li class="mb-1">Giá trị RGBA (với độ trong suốt: <code class="bg-gray-100 rounded px-1 py-0.5">rgba(255, 0, 0, 0.5)</code>).</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">3. <code class="bg-gray-100 rounded px-1 py-0.5">background-image</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-image</code> dùng để thiết lập hình ảnh nền cho phần tử.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-image</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#dcdcaa">url</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">'image.jpg'</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Có thể sử dụng nhiều hình ảnh nền bằng cách phân tách chúng bằng dấu phẩy:</p>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-image</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#dcdcaa">url</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">'image1.jpg'</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token" style="color:#dcdcaa">url</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">'image2.jpg'</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h2 class="text-2xl font-bold mt-6 mb-4">4. <code class="bg-gray-100 rounded px-1 py-0.5">background-position</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-position</code> dùng để xác định vị trí của hình ảnh nền trong phần tử.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-position</span><span class="token" style="color:#d4d4d4">:</span><span> center center</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Các từ khóa như <code class="bg-gray-100 rounded px-1 py-0.5">top</code>, <code class="bg-gray-100 rounded px-1 py-0.5">center</code>, <code class="bg-gray-100 rounded px-1 py-0.5">bottom</code>, <code class="bg-gray-100 rounded px-1 py-0.5">left</code>, <code class="bg-gray-100 rounded px-1 py-0.5">right</code>.</li>
<li class="mb-1">Đơn vị đo lường (ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">px</code>, <code class="bg-gray-100 rounded px-1 py-0.5">%</code>, <code class="bg-gray-100 rounded px-1 py-0.5">em</code>).</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">5. <code class="bg-gray-100 rounded px-1 py-0.5">background-size</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-size</code> thay đổi kích thước của hình ảnh nền.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-size</span><span class="token" style="color:#d4d4d4">:</span><span> cover</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">cover</code>: Kéo dài hình ảnh sao cho nó phủ kín toàn bộ phần tử mà không bị biến dạng.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">contain</code>: Hình ảnh được điều chỉnh để vừa với phần tử mà không bị cắt.</li>
<li class="mb-1">Các giá trị độ dài như <code class="bg-gray-100 rounded px-1 py-0.5">100px</code>, <code class="bg-gray-100 rounded px-1 py-0.5">50%</code>, v.v.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">6. <code class="bg-gray-100 rounded px-1 py-0.5">background-repeat</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-repeat</code> xác định xem hình ảnh nền có lặp lại hay không.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-repeat</span><span class="token" style="color:#d4d4d4">:</span><span> no-repeat</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">repeat</code>: Lặp lại hình ảnh nền (mặc định).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">no-repeat</code>: Không lặp lại hình ảnh nền.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">repeat-x</code>: Lặp lại hình ảnh nền theo chiều ngang.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">repeat-y</code>: Lặp lại hình ảnh nền theo chiều dọc.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">7. <code class="bg-gray-100 rounded px-1 py-0.5">background-attachment</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-attachment</code> xác định cách thức cuộn của hình ảnh nền khi cuộn trang.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-attachment</span><span class="token" style="color:#d4d4d4">:</span><span> fixed</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">scroll</code>: Hình ảnh nền cuộn theo nội dung (mặc định).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">fixed</code>: Hình ảnh nền không cuộn khi cuộn trang.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">local</code>: Hình ảnh nền cuộn cùng với nội dung của phần tử.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">8. <code class="bg-gray-100 rounded px-1 py-0.5">background-clip</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-clip</code> xác định khu vực mà hình ảnh nền có thể xuất hiện.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-clip</span><span class="token" style="color:#d4d4d4">:</span><span> border-box</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">border-box</code>: Hình ảnh nền xuất hiện trong khu vực của border.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">padding-box</code>: Hình ảnh nền xuất hiện trong khu vực của padding.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">content-box</code>: Hình ảnh nền chỉ xuất hiện trong khu vực của content (nội dung).</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">9. <code class="bg-gray-100 rounded px-1 py-0.5">background-origin</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-origin</code> xác định vùng bắt đầu của hình ảnh nền.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-origin</span><span class="token" style="color:#d4d4d4">:</span><span> padding-box</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">border-box</code>: Hình ảnh nền bắt đầu từ biên của border.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">padding-box</code>: Hình ảnh nền bắt đầu từ biên của padding.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">content-box</code>: Hình ảnh nền bắt đầu từ khu vực nội dung.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">10. <code class="bg-gray-100 rounded px-1 py-0.5">background-blend-mode</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-blend-mode</code> xác định cách các lớp nền (background layers) kết hợp với nhau.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-image</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#dcdcaa">url</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">'image1.jpg'</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token" style="color:#dcdcaa">url</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">'image2.jpg'</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-blend-mode</span><span class="token" style="color:#d4d4d4">:</span><span> multiply</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">normal</code>: Không có sự hòa trộn (mặc định).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">multiply</code>: Hòa trộn các lớp nền theo cách nhân các giá trị màu.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">screen</code>: Làm sáng các lớp nền.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">overlay</code>: Kết hợp <code class="bg-gray-100 rounded px-1 py-0.5">multiply</code> và <code class="bg-gray-100 rounded px-1 py-0.5">screen</code>.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">11. <code class="bg-gray-100 rounded px-1 py-0.5">background-position-x</code> và <code class="bg-gray-100 rounded px-1 py-0.5">background-position-y</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-position-x</code> và <code class="bg-gray-100 rounded px-1 py-0.5">background-position-y</code> xác định vị trí của hình ảnh nền theo các trục X và Y.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-position-x</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">50</span><span class="token" style="color:#b5cea8">%</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-position-y</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">50</span><span class="token" style="color:#b5cea8">%</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h2 class="text-2xl font-bold mt-6 mb-4">12. <code class="bg-gray-100 rounded px-1 py-0.5">background-size-x</code> và <code class="bg-gray-100 rounded px-1 py-0.5">background-size-y</code></h2>
<p class="mb-4">Các thuộc tính này cho phép bạn điều chỉnh kích thước của nền theo các trục X và Y riêng biệt.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-size-x</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">100</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-size-y</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">50</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h2 class="text-2xl font-bold mt-6 mb-4">13. <code class="bg-gray-100 rounded px-1 py-0.5">background-image-set</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background-image-set</code> cho phép bạn sử dụng nhiều hình ảnh nền khác nhau cho các điều kiện màn hình khác nhau, giống như thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">srcset</code> của thẻ <code class="bg-gray-100 rounded px-1 py-0.5"><img></code>.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-image-set</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#dcdcaa">url</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">'image-800.jpg'</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#b5cea8">800</span><span class="token" style="color:#b5cea8">w</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token" style="color:#dcdcaa">url</span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#ce9178">'image-400.jpg'</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#b5cea8">400</span><span class="token" style="color:#b5cea8">w</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h2 class="text-2xl font-bold mt-6 mb-4">14. <code class="bg-gray-100 rounded px-1 py-0.5">background-color-opacity</code> (Chưa phổ biến)</h2>
<p class="mb-4">Thuộc tính này dùng để thiết lập độ trong suốt của màu nền.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-color-opacity</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">0.5</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<blockquote class="border-l-4 border-gray-200 pl-4 italic mb-4">
<p class="mb-4"><strong>Lưu ý:</strong> Thuộc tính này không phải là một phần chính thức của CSS, và hiện nay chưa được hỗ trợ rộng rãi trong các trình duyệt.</p>
</blockquote>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">Các Thuộc Tính Gradient</h2>
<h3 class="text-xl font-bold mt-5 mb-3">15. <code class="bg-gray-100 rounded px-1 py-0.5">background-image: linear-gradient()</code></h3>
<p class="mb-4"><code class="bg-gray-100 rounded px-1 py-0.5">linear-gradient()</code> là một hàm trong CSS tạo ra một gradient tuyến tính (linear gradient), giúp tạo ra các hiệu ứng chuyển màu từ màu này sang màu khác.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-image</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#dcdcaa">linear-gradient</span><span class="token" style="color:#d4d4d4">(</span><span>to right</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token color">red</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token color">blue</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">to right</code>: Gradient sẽ chuyển từ trái qua phải.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">to left</code>, <code class="bg-gray-100 rounded px-1 py-0.5">to top</code>, <code class="bg-gray-100 rounded px-1 py-0.5">to bottom</code>: Định hướng của gradient.</li>
<li class="mb-1">Các màu sắc như <code class="bg-gray-100 rounded px-1 py-0.5">red</code>, <code class="bg-gray-100 rounded px-1 py-0.5">blue</code>, hoặc mã màu HEX.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">16. <code class="bg-gray-100 rounded px-1 py-0.5">background-image: radial-gradient()</code></h3>
<p class="mb-4"><code class="bg-gray-100 rounded px-1 py-0.5">radial-gradient()</code> tạo ra một gradient hình tròn hoặc elip từ một điểm trung tâm.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-image</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#dcdcaa">radial-gradient</span><span class="token" style="color:#d4d4d4">(</span><span>circle</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token color">red</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token color">yellow</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">circle</code>: Gradient có dạng hình tròn.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">ellipse</code>: Gradient có dạng hình elip.</li>
<li class="mb-1">Các màu sắc có thể thay đổi, ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">red</code>, <code class="bg-gray-100 rounded px-1 py-0.5">yellow</code>, hoặc các mã màu HEX.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">17. <code class="bg-gray-100 rounded px-1 py-0.5">background-image: conic-gradient()</code></h3>
<p class="mb-4"><code class="bg-gray-100 rounded px-1 py-0.5">conic-gradient()</code> tạo ra một gradient hình nón, giúp tạo ra các hiệu ứng màu sắc dạng nón xung quanh một điểm trung tâm.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">background-image</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#dcdcaa">conic-gradient</span><span class="token" style="color:#d4d4d4">(</span><span class="token color">red</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token color">yellow</span><span class="token" style="color:#d4d4d4">,</span><span> </span><span class="token color">green</span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Các màu sắc khác nhau để tạo gradient nón.</li>
</ul>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">Kết Luận</h2>
<p class="mb-4">Các thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">background</code> trong CSS cho phép bạn tạo ra các hiệu ứng nền rất phong phú và linh hoạt cho các phần tử trên trang web. Bằng cách kết hợp các thuộc tính như <code class="bg-gray-100 rounded px-1 py-0.5">background-image</code>, <code class="bg-gray-100 rounded px-1 py-0.5">background-color</code>, <code class="bg-gray-100 rounded px-1 py-0.5">background-size</code>, <code class="bg-gray-100 rounded px-1 py-0.5">background-position</code>, cùng với các hiệu ứng gradient như <code class="bg-gray-100 rounded px-1 py-0.5">linear-gradient</code>, <code class="bg-gray-100 rounded px-1 py-0.5">radial-gradient</code>, và <code class="bg-gray-100 rounded px-1 py-0.5">conic-gradient</code>, bạn có thể tạo ra các hiệu ứng nền đẹp mắt và sáng tạo cho trang web của mình.</p></div></article><footer class="mt-8 border-t pt-4"><p class="text-center text-gray-500">© 2024 SFIT | <a target="_blank" rel="noopener noreferrer" href="https://github.com/zunohoang">zunohoang</a>. All rights reserved.</p></footer></main><!--$--><!--/$--><script src="/_next/static/chunks/webpack-457dc077475af9ee.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"4:\"$Sreact.fragment\"\n5:I[15244,[],\"\"]\n6:I[43866,[],\"\"]\n7:I[96641,[\"177\",\"static/chunks/app/layout-40e71d42d3ccdee8.js\"],\"Analytics\"]\n9:I[86213,[],\"OutletBoundary\"]\nb:I[86213,[],\"MetadataBoundary\"]\nd:I[86213,[],\"ViewportBoundary\"]\nf:I[34835,[],\"\"]\n1:HL[\"/_next/static/media/4473ecc91f70f139-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n2:HL[\"/_next/static/media/463dafcda517f24f-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n3:HL[\"/_next/static/css/e503160baa2cd0f0.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"wpuafLjPzZSt3xkV7rnb4\",\"p\":\"\",\"c\":[\"\",\"docs\",\"6757f4f91233da8354bc08b2\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"id\",\"6757f4f91233da8354bc08b2\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$4\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e503160baa2cd0f0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[null,[\"$\",\"body\",null,{\"className\":\"__variable_1e4310 __variable_c3aa02 antialiased\",\"children\":[[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}],[\"$\",\"$L7\",null,{}]]}]]}]]}],{\"children\":[\"docs\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[[\"id\",\"6757f4f91233da8354bc08b2\",\"d\"],[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$4\",\"c\",{\"children\":[\"$L8\",null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}]]}],{},null]},null]},null]},null],[\"$\",\"$4\",\"h\",{\"children\":[null,[\"$\",\"$4\",\"vBh9atR0pXqFwn3whziSH\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\"}]]}]]}]]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Tài liệu HTML,CSS,JS - (Background)\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến Background và Gradient\\n\\nCSS cung cấp một loạt các thuộc tính để điều chỉnh nền của các phần tử trên trang web, bao gồm cả các...\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Tài liệu HTML,CSS,JS - (Background)\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến Background và Gradient\\n\\nCSS cung cấp một loạt các thuộc tính để điều chỉnh nền của các phần tử trên trang web, bao gồm cả các...\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - (Background)\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"8\",{\"property\":\"article:published_time\",\"content\":\"2024-12-10T07:59:53.455Z\"}],[\"$\",\"meta\",\"9\",{\"property\":\"article:author\",\"content\":\"zunohoang\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Tài liệu HTML,CSS,JS - (Background)\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến Background và Gradient\\n\\nCSS cung cấp một loạt các thuộc tính để điều chỉnh nền của các phần tử trên trang web, bao gồm cả các...\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - (Background)\"}]]\na:null\n"])</script><script>self.__next_f.push([1,"10:I[48073,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"default\"]\n12:I[44839,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"\"]\n11:T209a,"])</script><script>self.__next_f.push([1,"# Các Thuộc Tính CSS Liên Quan Đến Background và Gradient\n\nCSS cung cấp một loạt các thuộc tính để điều chỉnh nền của các phần tử trên trang web, bao gồm cả các hiệu ứng gradient. Dưới đây là tất cả các thuộc tính chính liên quan đến background và gradient.\n\n## 1. `background`\nThuộc tính `background` là một thuộc tính tổng hợp, cho phép bạn thiết lập tất cả các thuộc tính nền trong một dòng.\n\n### Cách sử dụng:\n```css\ndiv {\n background: #ff5733 url('image.jpg') no-repeat center center fixed;\n}\n```\nCác giá trị có thể bao gồm:\n- Màu nền (ví dụ: `#ff5733`).\n- Hình ảnh nền (ví dụ: `url('image.jpg')`).\n- `no-repeat`: Không lặp lại hình ảnh nền.\n- `repeat`: Lặp lại hình ảnh nền.\n- `center`: Căn giữa hình ảnh nền.\n- `fixed`: Đặt hình ảnh nền cố định khi cuộn trang.\n\n## 2. `background-color`\nThuộc tính `background-color` dùng để thiết lập màu nền của phần tử.\n\n### Cách sử dụng:\n```css\ndiv {\n background-color: lightblue;\n}\n```\nCác giá trị có thể sử dụng:\n- Tên màu (ví dụ: `red`, `blue`, `green`).\n- Mã màu hex (ví dụ: `#ff5733`).\n- Giá trị RGB (ví dụ: `rgb(255, 0, 0)`).\n- Giá trị RGBA (với độ trong suốt: `rgba(255, 0, 0, 0.5)`).\n\n## 3. `background-image`\nThuộc tính `background-image` dùng để thiết lập hình ảnh nền cho phần tử.\n\n### Cách sử dụng:\n```css\ndiv {\n background-image: url('image.jpg');\n}\n```\nCó thể sử dụng nhiều hình ảnh nền bằng cách phân tách chúng bằng dấu phẩy:\n```css\ndiv {\n background-image: url('image1.jpg'), url('image2.jpg');\n}\n```\n\n## 4. `background-position`\nThuộc tính `background-position` dùng để xác định vị trí của hình ảnh nền trong phần tử.\n\n### Cách sử dụng:\n```css\ndiv {\n background-position: center center;\n}\n```\nGiá trị có thể sử dụng:\n- Các từ khóa như `top`, `center`, `bottom`, `left`, `right`.\n- Đơn vị đo lường (ví dụ: `px`, `%`, `em`).\n\n## 5. `background-size`\nThuộc tính `background-size` thay đổi kích thước của hình ảnh nền.\n\n### Cách sử dụng:\n```css\ndiv {\n background-size: cover;\n}\n```\nCác giá trị có thể sử dụng:\n- `cover`: Kéo dài hình ảnh sao cho nó phủ kín toàn bộ phần tử mà không bị biến dạng.\n- `contain`: Hình ảnh được điều chỉnh để vừa với phần tử mà không bị cắt.\n- Các giá trị độ dài như `100px`, `50%`, v.v.\n\n## 6. `background-repeat`\nThuộc tính `background-repeat` xác định xem hình ảnh nền có lặp lại hay không.\n\n### Cách sử dụng:\n```css\ndiv {\n background-repeat: no-repeat;\n}\n```\nCác giá trị có thể sử dụng:\n- `repeat`: Lặp lại hình ảnh nền (mặc định).\n- `no-repeat`: Không lặp lại hình ảnh nền.\n- `repeat-x`: Lặp lại hình ảnh nền theo chiều ngang.\n- `repeat-y`: Lặp lại hình ảnh nền theo chiều dọc.\n\n## 7. `background-attachment`\nThuộc tính `background-attachment` xác định cách thức cuộn của hình ảnh nền khi cuộn trang.\n\n### Cách sử dụng:\n```css\ndiv {\n background-attachment: fixed;\n}\n```\nCác giá trị có thể sử dụng:\n- `scroll`: Hình ảnh nền cuộn theo nội dung (mặc định).\n- `fixed`: Hình ảnh nền không cuộn khi cuộn trang.\n- `local`: Hình ảnh nền cuộn cùng với nội dung của phần tử.\n\n## 8. `background-clip`\nThuộc tính `background-clip` xác định khu vực mà hình ảnh nền có thể xuất hiện.\n\n### Cách sử dụng:\n```css\ndiv {\n background-clip: border-box;\n}\n```\nCác giá trị có thể sử dụng:\n- `border-box`: Hình ảnh nền xuất hiện trong khu vực của border.\n- `padding-box`: Hình ảnh nền xuất hiện trong khu vực của padding.\n- `content-box`: Hình ảnh nền chỉ xuất hiện trong khu vực của content (nội dung).\n\n## 9. `background-origin`\nThuộc tính `background-origin` xác định vùng bắt đầu của hình ảnh nền.\n\n### Cách sử dụng:\n```css\ndiv {\n background-origin: padding-box;\n}\n```\nCác giá trị có thể sử dụng:\n- `border-box`: Hình ảnh nền bắt đầu từ biên của border.\n- `padding-box`: Hình ảnh nền bắt đầu từ biên của padding.\n- `content-box`: Hình ảnh nền bắt đầu từ khu vực nội dung.\n\n## 10. `background-blend-mode`\nThuộc tính `background-blend-mode` xác định cách các lớp nền (background layers) kết hợp với nhau.\n\n### Cách sử dụng:\n```css\ndiv {\n background-image: url('image1.jpg'), url('image2.jpg');\n background-blend-mode: multiply;\n}\n```\nCác giá trị có thể sử dụng:\n- `normal`: Không có sự hòa trộn (mặc định).\n- `multiply`: Hòa trộn các lớp nền theo cách nhân các giá trị màu.\n- `screen`: Làm sáng các lớp nền.\n- `overlay`: Kết hợp `multiply` và `screen`.\n\n## 11. `background-position-x` và `background-position-y`\nThuộc tính `background-position-x` và `background-position-y` xác định vị trí của hình ảnh nền theo các trục X và Y.\n\n### Cách sử dụng:\n```css\ndiv {\n background-position-x: 50%;\n background-position-y: 50%;\n}\n```\n\n## 12. `background-size-x` và `background-size-y`\nCác thuộc tính này cho phép bạn điều chỉnh kích thước của nền theo các trục X và Y riêng biệt.\n\n### Cách sử dụng:\n```css\ndiv {\n background-size-x: 100px;\n background-size-y: 50px;\n}\n```\n\n## 13. `background-image-set`\nThuộc tính `background-image-set` cho phép bạn sử dụng nhiều hình ảnh nền khác nhau cho các điều kiện màn hình khác nhau, giống như thuộc tính `srcset` của thẻ `\u003cimg\u003e`.\n\n### Cách sử dụng:\n```css\ndiv {\n background-image-set: url('image-800.jpg') 800w, url('image-400.jpg') 400w;\n}\n```\n\n## 14. `background-color-opacity` (Chưa phổ biến)\nThuộc tính này dùng để thiết lập độ trong suốt của màu nền.\n\n### Cách sử dụng:\n```css\ndiv {\n background-color-opacity: 0.5;\n}\n```\n\u003e **Lưu ý:** Thuộc tính này không phải là một phần chính thức của CSS, và hiện nay chưa được hỗ trợ rộng rãi trong các trình duyệt.\n\n---\n\n## Các Thuộc Tính Gradient\n\n### 15. `background-image: linear-gradient()`\n`linear-gradient()` là một hàm trong CSS tạo ra một gradient tuyến tính (linear gradient), giúp tạo ra các hiệu ứng chuyển màu từ màu này sang màu khác.\n\n### Cách sử dụng:\n```css\ndiv {\n background-image: linear-gradient(to right, red, blue);\n}\n```\nGiá trị có thể sử dụng:\n- `to right`: Gradient sẽ chuyển từ trái qua phải.\n- `to left`, `to top`, `to bottom`: Định hướng của gradient.\n- Các màu sắc như `red`, `blue`, hoặc mã màu HEX.\n\n### 16. `background-image: radial-gradient()`\n`radial-gradient()` tạo ra một gradient hình tròn hoặc elip từ một điểm trung tâm.\n\n### Cách sử dụng:\n```css\ndiv {\n background-image: radial-gradient(circle, red, yellow);\n}\n```\nGiá trị có thể sử dụng:\n- `circle`: Gradient có dạng hình tròn.\n- `ellipse`: Gradient có dạng hình elip.\n- Các màu sắc có thể thay đổi, ví dụ: `red`, `yellow`, hoặc các mã màu HEX.\n\n### 17. `background-image: conic-gradient()`\n`conic-gradient()` tạo ra một gradient hình nón, giúp tạo ra các hiệu ứng màu sắc dạng nón xung quanh một điểm trung tâm.\n\n### Cách sử dụng:\n```css\ndiv {\n background-image: conic-gradient(red, yellow, green);\n}\n```\nCác giá trị có thể sử dụng:\n- Các màu sắc khác nhau để tạo gradient nón.\n\n---\n\n## Kết Luận\nCác thuộc tính `background` trong CSS cho phép bạn tạo ra các hiệu ứng nền rất phong phú và linh hoạt cho các phần tử trên trang web. Bằng cách kết hợp các thuộc tính như `background-image`, `background-color`, `background-size`, `background-position`, cùng với các hiệu ứng gradient như `linear-gradient`, `radial-gradient`, và `conic-gradient`, bạn có thể tạo ra các hiệu ứng nền đẹp mắt và sáng tạo cho trang web của mình."])</script><script>self.__next_f.push([1,"8:[\"$\",\"main\",null,{\"className\":\"container mx-auto px-4 pt-2 py-8\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold\",\"children\":\"Tài liệu HTML,CSS,JS - (Background)\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-600\",\"children\":[\"Đăng bởi \",[\"$\",\"i\",null,{\"children\":\"zunohoang\"}],\" vào \",[\"$\",\"time\",null,{\"dateTime\":\"2024-12-10T07:59:53.455Z\",\"children\":\"12/10/2024\"}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"👁️ \",41,\" lượt xem\"]}]]}],[\"$\",\"article\",null,{\"children\":[\"$\",\"$L10\",null,{\"content\":\"$11\"}]}],[\"$\",\"footer\",null,{\"className\":\"mt-8 border-t pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-center text-gray-500\",\"children\":[\"© 2024 SFIT | \",[\"$\",\"$L12\",null,{\"href\":\"https://github.com/zunohoang\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"zunohoang\"}],\". All rights reserved.\"]}]}]]}]\n"])</script></body></html>