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 : url và màu nền

Đ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ủ đề url nền và màu sắc

[Bài 22] Hướng Dẫn Chỉnh Sửa Font Chữ Và Màu Sắc Website Theme Flatsome

  • Tác giả: Tuyên Trần
  • Ngày đăng: 2021-01-11
  • Đánh giá: 4 ⭐ ( 5805 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HƯỚNG DẪN TẠO WEBSITE CHUYÊN NGHIỆP, MIỄN PHÍ [Không Biết Lập Trình Cũng Làm Được]

    Tặng bạn 1 số khóa học hữu ích:
    ► Khóa học thiết kế website chuyên nghiệp: https://bit.ly/3hou0UO
    ► Khóa học Quảng Cáo Google ADS: https://bit.ly/3hk6gkv
    ► Tham khảo các khóa học của Tuyên Trần: https://tuyentran.vn/

    ► Đăng ký khóa học thiết kế website chuyên sâu: https://tuyentran.vn/khoa-hoc/khoa-hoc-thiet-ke-website-chuyen-nghiep-vip/
    – Ở khóa học chuyên sâu bạn sẽ được hỗ trợ trực tiếp trong suốt quá trình bạn thực hành làm website
    – Bạn sẽ được tặng kèm 100+ mẫu giao diện website các lĩnh vực khác nhau.

    [Bài 22] Hướng Dẫn Chỉnh Sửa Font Chữ Và Màu Sắc Website Theme Flatsome
    ===============================================
    ĐĂNG KÝ (SUBSCRIBE) ĐỂ THEO DÕI CÁC BÀI ĐÀO TẠO TIẾP THEO: https://www.youtube.com/c/TuyênTrầnGIVE
    ===============================================
    ►Link tải theme miễn phí: https://tiepthitute.com/khoa-hoc-tu-tao-website-mien-phi-khong-biet-lap-trinh-cung-lam-duoc/
    ►Link Google Font: https://fonts.google.com/
    ►Link Lấy Mã Màu: https://bietmaytinh.com/bang-ma-mau/

    Nội dung hướng dẫn:
    – Hướng Dẫn Chỉnh Sửa Font Chữ Cho Website
    – Hướng Dẫn Chỉnh Màu Sắc Cho Website

    chinhsuamausacwebsitechinhsuafontchuwebsite
    Người hướng dẫn
    ►Tuyên Trần
    ►Founder Datawa Co., Ltd và Chuyên Trang MKT Tiếp Thị Tử Tế
    ►Website: tuyentran.vn
    ►Website: tiepthitute.com
    ►Tel: 0348.113.115 (Zalo)
    ►Facebook: https://bit.ly/2JsfNqp
    ►Fanpage: https://www.facebook.com/fanpagetuyentran

Thay đổi hình nền và màu sắc

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 6982 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu cách thay đổi hình nền Windows nền (hình nền) và màu chủ đề bằng cách sử dụng cài đặt cá nhân hóa.

Bài 3 – Định dạng màu sắc và văn bản trong CSS

  • Tác giả: hoclaptrinhweb.org
  • Đánh giá: 4 ⭐ ( 8338 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

9 cách sử dụng background (nền) trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 4846 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 3475 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

2.3. Màu sắc và phông nền

  • Tác giả: www.laptrinhtanbinh.com
  • Đánh giá: 4 ⭐ ( 2442 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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

  • Tác giả: chongthamvietnam.vn
  • Đánh giá: 5 ⭐ ( 9752 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Từ VLOS

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  nút - tạo một nút thành một liên kết bootstrap

By ads_php