Góc Ảnh

Menu Bài Viết: | Z photos

15
Menu Bài Viết: | Z photos

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

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:

Bạn đang xem: ảnh nền cho web

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

Tham khảo: Hình ảnh chất, ngầu, độc đẹp nhất mang đậm phong cách của dân chơi

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:

Menu Bài Viết:

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ụ

Tham khảo: Hình nền những chú chó đáng yêu ngộ nghĩnh cho máy tính của bạn

<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ínhbackground-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.

Danh mục: Góc Ảnh
Nguồn: https://zphotos.org

0 ( 0 votes )

Z photos

https://zphotos.org
Z Photos Blog cập nhật tin tức, thiết bị và công nghệ các bài viết, video, mẹo, hướng dẫn và thủ thuật nhiếp ảnh

Bài Viết Liên Quan