Tìm hiểu cách đặt màu nền nói chung, cách tạo gradient và thay đổi màu nền với các ví dụ.

Bạn đang xem : thêm màu nền vào html

Điều đầu tiên bạn nên biết là có nhiều loại màu HTML khác nhau, chẳng hạn như dưới dạng mã màu Hex, tên màu HTML, giá trị RGB và RGBa, màu HSL, v.v. Để chọn màu ưa thích của bạn, hãy sử dụng Công cụ màu của chúng tôi.

Trong đoạn mã này, bạn có thể tìm thấy nhiều cách khác nhau để thêm màu nền. Hãy bắt đầu từ cái dễ nhất.

Thêm thuộc tính

style

vào & lt; body & gt; phần tử

Bạn có thể đặt màu nền cho tài liệu HTML bằng cách thêm style = “background-color:” vào phần tử & lt; body & gt; .

Ví dụ về cách đặt nền màu với thuộc tính

style

:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

style

=

" background-color: # 1c87c9; "

& gt;

& lt;

h1

& gt;

Một số tiêu đề

& lt; /

h1

& gt;

& lt;

p

& gt;

Một số đoạn văn chẳng hạn.

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Một số tiêu đề

Một số đoạn văn chẳng hạn.

Thêm thuộc tính CSS background-color vào & lt; body & gt; phần tử

Thuộc tính background-color được sử dụng để thay đổi màu nền. Chèn nó vào phần tử & lt; body & gt; , bạn sẽ có trang bìa đủ màu.

Ví dụ về cách đặt màu nền bằng CSS thuộc tính background-color:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background-color

:

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Bạn cũng có thể thêm màu nền cho các phần tử cụ thể trong tài liệu của mình. Ví dụ: hãy xem cách thay đổi màu sắc của tiêu đề và đoạn văn.

Ví dụ về cách thêm màu nền vào các phần tử cụ thể:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

background-color

:

# e6ebef

; }

h2

{

background-color

:

# 8ebf42

; }

p

{

background-color

:

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Một số tiêu đề có nền xanh lục.

& lt ; /

h2

& gt;

& lt;

p

& gt;

Một số đoạn có nền màu xanh lam.

& lt ; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Hãy xem một ví dụ khác, trong đó chúng tôi thêm màu nền với giá trị tên màu vào phần tử & lt; h1 & gt; . Chúng tôi chỉ định giá trị RGB cho & lt; h2 & gt ;, HSL cho & lt; p & gt; và giá trị RGBa cho phần tử & lt; span & gt; .

Ví dụ về cách đặt màu nền với các loại màu khác nhau:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

h1

{

background-color

: lightblue; }

h2

{

background-color

:

rgb

(

142

,

191

,

66

); }

p

{

background-color

:

hsl

(

300

,

100%

,

25%

); }

span

{

background-color

:

rgba

(

255

,

127

,

80

,

0.58

); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Ví dụ

& lt; /

h1

& gt;

& lt;

h2

& gt;

Một số tiêu đề có nền xanh lục.

& lt ; /

h2

& gt;

& lt;

p

& gt;

Một số đoạn có nền màu xanh lam.

& lt ; /

p

& gt;

& lt;

span

& gt;

Một số đoạn cho

& lt; / < p class = "hljs-name"> span

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Tạo nền với gradient

Hình nền Gradient cho phép bạn tạo chuyển tiếp mượt mà giữa hai hoặc nhiều màu được chỉ định.

Có hai loại nền gradient: linear-gradient radial-gradient .

Trong nền tuyến tính-gradient , bạn có thể đặt điểm bắt đầu cho các màu. Nếu bạn không đề cập đến điểm bắt đầu, nó sẽ tự động đặt “từ trên xuống dưới” theo mặc định.

Ví dụ về thiết lập nền gradient tuyến tính:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

# grad

{

chiều cao

:

500px

;

background-color

: blue;

background-image

:

linear-gradient

(sang phải,

# 1c87c9

,

# 8ebf42

); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Nền Gradient Tuyến tính Từ phải sang Trái

& lt ; /

h1

& gt;

& lt;

div

id

=

" grad "

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ đã cho cho thấy một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu từ màu xanh lam, chuyển sang màu xanh lục. Thay đổi nó theo yêu cầu của bạn.

Trong nền gradient xuyên tâm , điểm bắt đầu được xác định bởi tâm của nó.

Ví dụ về cách đặt nền radial-gradient:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

# grad

{

height

:

500px

;

background-color

: màu xám;

background-image

:

radial-gradient

(

# e6ebef ,

# 1c87c9

,

# 8ebf42

); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Nền chuyển màu xuyên tâm

& lt; / < p class = "hljs-name"> h1

& gt;

& lt;

div

id

=

" grad "

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Bạn cũng có thể điều chỉnh tỷ lệ phần trăm màu của mình như sau: (color1 30%, color2 50%, color3 20%).

Tạo nền thay đổi

Bạn có thể tạo một nền sẽ thay đổi màu sắc của nó trong thời gian đã đề cập. Vì vậy, hãy thêm thuộc tính animation vào phần tử & lt; body & gt; . Sử dụng quy tắc @keyframes để đặt màu nền mà bạn sẽ chuyển qua cũng như khoảng thời gian mỗi màu sẽ xuất hiện trên trang.

Ví dụ về cách tạo nền thay đổi:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

body

{ -webkit-

hoạt ảnh

: colorchange

20 giây

vô hạn;

hoạt ảnh

: colorchange

20 giây

vô hạn; }

@ - webkit-keyframes

colorchange {

0%

{

background

:

# 8ebf42

; }

25%

{

background

:

# e6ebef

; }

50%

{

background

:

# 1c87c9

; }

75%

{

background

:

# 095484

; }

100%

{

background

:

# d0e2bc

; } }

@ keyframes

colorchange {

0%

{

background

:

# 8ebf42

; }

25%

{

background

:

# e6ebef

; }

50%

{

background

:

# 1c87c9

; }

75%

{

background

:

# 095484

; }

100%

{

background

:

# d0e2bc

; } }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Nền thay đổi

& lt; /

h1

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Tỷ lệ phần trăm chỉ định độ dài hoạt ảnh được đề cập trong “colorchange” (ví dụ: 20 giây).

Bạn có thể thay đổi thời gian và màu sắc để đạt được kết quả mong muốn.


Xem thêm những thông tin liên quan đến chủ đề thêm màu nền vào html

CSS Background-image

  • Tác giả: F8 Official
  • Ngày đăng: 2020-01-30
  • Đánh giá: 4 ⭐ ( 2446 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy học tại http://fullstack.edu.vn để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.

    hoclaptrinh mienphi frontend backend devops
    ———————————————————–
    SƠN ĐẶNG
    ► Facebook: https://fb.com/sondnmc
    ► Email: sondnf8@gmail.com
    —————————————
    ► Học lập trình: http://fullstack.edu.vn
    ► Viết CV xin việc: http://mycv.vn
    —————————————
    HỌC LẬP TRÌNH MIỄN PHÍ
    ► Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
    ► Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css

Thiết lập màu nền trong HTML

  • Tác giả: tusach.thuvienkhoahoc.com
  • Đánh giá: 4 ⭐ ( 4091 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để thiết lập màu nền cho website trong HTML, bạn chỉ cần thay đổi thành tố phần “body” (thân) của thẻ

    . Các bước hướng dẫn sẽ thay

Cách để Thiết lập màu nền trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 3996 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Thiết lập màu nền trong HTML

Sử dụng màu sắc trong HTML

  • Tác giả: levunguyen.com
  • Đánh giá: 5 ⭐ ( 8048 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn được cho các người học lập trình web HTML cách sử dụng màu sắc trong HTML. Trình bày chi tiết 3 cách để thêm màu sắc vào website bao gồm dùng tên màu sắc, dùng bảng mã hex codes hoặc sử dụng RGB làm giá trị của thuộc tính màu sắc. Bài viết cũng sẽ chia sẻ cách thay đổi background của website bằng thuộc tính bgcolor.

Code Chèn Hình Nền Html Background Images, Thay Đổi Hình Nền Background Trong Html

  • Tác giả: tiennghich.mobi
  • Đánh giá: 4 ⭐ ( 2644 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Backgroundlà thuộc tính quan trọng trong CSS, nó được dùng để tạo nền cho các thẻ mà dễ thấy nhất là thẻ body, Nền có hai kiểu: nền màu và nền dùng ảnh

Thêm hình nền vào div bằng CSS

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 3 ⭐ ( 7556 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đã cố gắng thêm hình nền vào một lớp div bằng CSS, nhưng không thành công. Mã HTML: