IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 HTML Background Images - Hình nền trong HTML

HTML Background Images - Hình nền trong HTML

by GokiSoft.Com - 22:14 22/05/2020 26,872 Lượt Xem


Một hình nền có thể được xác định gần như trên mọi thành phần HTML.


Hình nền trên một thành phần HTML


Để thêm một hình nền trên một phần tử HTML, sử dụng thuộc tính style của HTML và thuộc tính background-image của CSS:

ví dụ

Thêm một hình nền trên một thành phần HTML:

<div style="background-image: url('img_girl.jpg');">
<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<div style="background-image: url('img_girl.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>

</body>
</html>


Bạn cũng có thể xác định hình nền trong thành phần  <style> :

ví dụ

Xác định hình nền trong thành phần style:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
<!DOCTYPE html>
<html>
<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
<body>

<h2>Background Image</h2>

<div>
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>

</body>
</html>





Hình nền trên một trang


Nếu bạn muốn toàn bộ trang phải có hình nền, bạn phải xác định hình nền trên thành phần 
 <body> :

ví dụ

Thêm một hình nền trên trang HTML:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>
<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

<body>

<h2>Background Image</h2>

<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>

</body>
</html>




Lặp lại hình nền


Nếu một hình nền nhỏ hơn thành phần, hình ảnh sẽ tự lặp lại, cả về chiều ngang lẫn dọc, cho đến khi nó chạm đến cuối của thành phần:




ví dụ

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

<body>

<h2>Background Repeat</h2>

<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>

</body>
</html>


Để tránh các hình nền tự lặp lại chính nó, sử dụng thuộc tính background-repeat.

ví dụ

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

<body>

<h2>Background No Repeat</h2>

<p>You can avoid the image from being repeated by setting the background-repeat property to "no-repeat".</p>

</body>
</html>




Hình nền bao phủ


Nếu bạn muốn hình nền bảo phủ toàn bộ thành phần, bạn có thể đặt thuộc tính
background-size thành cover.

Đồng thời, để đảm bảo toàn bộ thành phần sẽ luôn được bao phủ, đặt thuộc tính background-attachment thành fixed. 

ví dụ

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the BODY element.</p>

</body>
</html>




Co dãn hình nền


Nếu bạn muốn kéo dãn hình nền cho phù hợp với toàn bộ hình ảnh trong thành phần, bạn có thể đặt thuộc tính background-size thành 100% 100%:

ví dụ

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>
<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>
<body>

<h2>Background Stretch</h2>

<p>Set the background-size property to "100% 100%r" and the background image will be stretched to cover the entire element, in this case the BODY element.</p>

</body>
</html>




Học thêm CSS


Trong ví dụ trên bạn đã được học rằng hình nền có thể được tạo kiểu bằng cách sử dụng các thuộc tính hình nền của CSS.

Để học thêm về các thuộc tính CSS, hãy tìm hiểu CSS Tutorial.


Bình luận



Tài Liệu Tham Khảo

Đã sao chép!!!