Cách thêm hình ảnh lên trên nền trong CSS

Question

Các hình nền được vẽ trên các lớp ngữ cảnh xếp chồng lên nhau. Lớp đầu tiên được chỉ định được vẽ như thể nó gần người dùng nhất

Nội dung chính Show

Làm cách nào để hiển thị hình ảnh trên hình nền trong CSS?
Làm cách nào để phủ hai hình ảnh trong CSS?
Làm cách nào để định vị một hình ảnh trong CSS?

Các đường viền của phần tử sau đó được vẽ bên trên chúng và background-color được vẽ bên dưới chúng. Cách hình ảnh được vẽ so với hộp và đường viền của nó được xác định bởi thuộc tính CSS background-clip và background-origin

Nếu không thể vẽ một hình ảnh đã chỉ định (ví dụ: khi tệp được biểu thị bằng URI đã chỉ định không thể tải được), trình duyệt sẽ xử lý hình ảnh đó như cách chúng sẽ xử lý giá trị

background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");

/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

0

Ghi chú. Ngay cả khi hình ảnh bị mờ và màu sắc sẽ không được hiển thị trong các trường hợp bình thường, các nhà phát triển web phải luôn chỉ định một background-color. Nếu không thể tải hình ảnh—ví dụ: khi mạng ngừng hoạt động—màu nền sẽ được sử dụng làm màu dự phòng

Mỗi hình nền được chỉ định dưới dạng từ khóa

background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");

/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

0 hoặc dưới dạng giá trị

background-image = 
  #  

 = 
    |
  none     

 = 
         |
    

 = 
  url(  * )  |
  src(  * )

1

Để chỉ định nhiều hình nền, hãy cung cấp nhiều giá trị, được phân tách bằng dấu phẩy

background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");

/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");

/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

0

Là một từ khóa biểu thị sự vắng mặt của hình ảnh

background-image = 
  #  

 = 
    |
  none     

 = 
         |
    

 = 
  url(  * )  |
  src(  * )

1

Là một

background-image = 
  #  

 = 
    |
  none     

 = 
         |
    

 = 
  url(  * )  |
  src(  * )

1 biểu thị hình ảnh để hiển thị. Có thể có một vài trong số chúng, được phân tách bằng dấu phẩy, vì nhiều nền được hỗ trợ

Trình duyệt không cung cấp bất kỳ thông tin đặc biệt nào về hình nền cho công nghệ hỗ trợ. Điều này chủ yếu quan trọng đối với trình đọc màn hình, vì trình đọc màn hình sẽ không thông báo về sự hiện diện của nó và do đó không truyền đạt thông tin gì cho người dùng. Nếu hình ảnh chứa thông tin quan trọng để hiểu mục đích tổng thể của trang, thì tốt hơn là mô tả nó theo ngữ nghĩa trong tài liệu

Hiểu Tiêu chí Thành công 1. 1. 1. W3C Hiểu WCAG 2. 0

Giá trị ban đầu _______ 10 Áp dụng cho tất cả các phần tử. Nó cũng áp dụng cho

background-image = 
  #  

 = 
    |
  none     

 = 
         |
    

 = 
  url(  * )  |
  src(  * )

6 và

background-image = 
  #  

 = 
    |
  none     

 = 
         |
    

 = 
  url(  * )  |
  src(  * )

7. Các giá trị kế thừa không được chỉ định, nhưng với các giá trị

background-image = 
  #  

 = 
    |
  none     

 = 
         |
    

 = 
  url(  * )  |
  src(  * )

8 làm cho loại Hoạt hình tuyệt đối trở nên rời rạc

Làm cách nào để hiển thị hình ảnh trên hình nền trong CSS?

CSS cho phép bạn thêm nhiều hình nền cho một phần tử, thông qua thuộc tính hình nền . Các hình nền khác nhau được phân tách bằng dấu phẩy và các hình ảnh được xếp chồng lên nhau, trong đó hình ảnh đầu tiên gần người xem nhất.

Làm cách nào để phủ hai hình ảnh trong CSS?

Sử dụng hai phần tử Thêm một .

Làm cách nào để định vị một hình ảnh trong CSS?

Bạn có thể dễ dàng định vị hình ảnh bằng cách sử dụng thuộc tính vị trí đối tượng . Bạn cũng có thể sử dụng nhiều cách khác như thuộc tính float sẽ được thảo luận thêm trong bài viết này. phương pháp. thuộc tính vị trí đối tượng. Chỉ định cách định vị phần tử hình ảnh với tọa độ x, y bên trong hộp nội dung của nó.

programming css

Cách thêm hình ảnh lên trên nền trong CSS

Làm cách nào để hiển thị hình ảnh trên hình nền trong CSS?

Làm cách nào để phủ hai hình ảnh trong CSS?

Làm cách nào để định vị một hình ảnh trong CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội