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 : hình ảnh màu nền 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ư Mã màu hệ lục phân, 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 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ủ đề html hình nền màu

CSS Background – Thiết lập màu nền và ảnh nền với CSS

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2021-08-17
  • Đánh giá: 4 ⭐ ( 4863 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu nhóm thuộc tính CSS Background cho phép thiết lập màu nền và ảnh nền cho các phần tử Web: background-color, background-image, background-clip, background-origin, background-repeat, background-size, background-position, background-attachment.

    Nếu bạn thấy nội dung video giá trị và hữu ích, hãy ủng hộ mình một ly cà phê nhé.
    Rất mong nhận được sự động viên từ các bạn. Một chút khích lệ từ người xem sẽ là động lực to lớn để mình tiếp tục phát triển kênh.
    BIDV: 21510002210466
    Vietcombank: 0451000308735
    hoặc qua ví điện tử momo, zalopay, shoppeepay: https://bit.ly/ViDienTu

    css html nguyenthithuylien

Thẻ div, màu nền, hình nền, khung trong CSS

  • Tác giả: www.quocbuugroup.com
  • Đánh giá: 3 ⭐ ( 3952 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu thẻ div, màu nền, hình nền, khung trong CSS, bài giảng được biên soạn và đăng tải trên website quocbuugroup.com có kèm video hướng dẫn tiếng Việt, học viên có thể tham khảo thêm nhiều video hướng dẫn lập trinh web trên kênh youtube của Quốc Bửu Group để bổ sung kiến thức.

Thiết lập background trong HTML

  • Tác giả: camranh.khanhhoa.gov.vn
  • Đánh giá: 4 ⭐ ( 6530 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: blank page

Tô Màu Nền

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 5 ⭐ ( 2681 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi vẽ các hình (hình chữ nhật, hình tròn…) chúng ta có thể sử dụng thuộc tính `fillStyle` để tô màu nền cho hình.

    ## Màu Nền Đơn Giản ##
    Sử dụng thuộc tính `fillStyle` chúng ta có thể tạo m…

Thiết lập màu nền với CSS background

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 7048 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 với CSS background, sử dụng các thuộc tính background, background-image, background-repeat

Thiết lập thẻ Background trong HTML

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 3 ⭐ ( 5175 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập thẻ Background trong HTML. Theo mặc định, nền của trang web là màu trắng. Bạn có thể không thích màu này, và muốn thiết lập một màu khác cho trang của bạn.

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

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 7099 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Màu nền (background) trong HTML của trang web mặc định là màu trắng. Bạn không thích màu này và muốn thiết lập một màu nền khác cho trang của bạn. HTML cung cấp cho bạn hai cách sau để cài đặt nền cho trang web của bạn

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tìm hiểu sâu về kiểu dữ liệu SQL varchar - kiểu dữ liệu sql int varchar

By ads_php