Nền tảng của CSS là gì?

Question

Những gì tôi nghĩ sẽ là một nhiệm vụ đơn giản đã đưa tôi xuống hố sâu khi học 8 thuộc tính

background-image: url("image.png");

0 khác nhau. Tôi đã mất hàng giờ để tìm ra tất cả những gì họ đã làm và cách họ tương tác

Nội dung chính Show

CSS bìa nền là gì?
Chúng ta có thể sử dụng nền trong CSS không?
Kích thước nền trong CSS là gì?

Bây giờ, tôi muốn dạy cho bạn mọi thứ bạn cần biết về CSS nền. Trong vài phút thay vì giờ

🎨 Màu sắc

Tài sản.

background-image: url("image.png");

1 Giá trị mặc định.

background-image: url("image.png");

2

Thuộc tính nền được sử dụng phổ biến nhất. Nó cho phép chúng ta thay đổi màu nền của một phần tử

Màu có thể được chỉ định bằng ký hiệu rgb, hsl hoặc hex

/* Without Transparency */
background-color: rgb(0,0,0);
background-color: hsl(0,0%,0%);
background-color: #000000;

/* With Transparency */
background-color: rgba(0,0,0,1);
background-color: hsla(0,0%,0%,1);
background-color: #000000ff;

Bạn cũng có thể sử dụng một trong 140 màu được xác định trước hoặc từ khóa

background-image: url("image.png");

2

📷 Hình ảnh

Tài sản.

background-image: url("image.png");

4 Giá trị mặc định.

background-image: url("image.png");

5

Ngôi sao của chương trình. Hầu như tất cả các thuộc tính nền khác sửa đổi nó theo một cách nào đó

Nó cho phép chúng ta đặt một hình ảnh làm nền của phần tử

Để làm điều đó, hãy sử dụng hàm

background-image: url("image.png");

0 với một URL tương đối hoặc tuyệt đối làm tham số của nó. URL phải được đặt trong dấu ngoặc kép

background-image: url("image.png");

1 hoặc dấu nháy đơn

background-image: url("image.png");

2

GHI CHÚ. Khi bạn chọn sử dụng một URL tương đối, hãy nhớ rằng nó liên quan đến biểu định kiểu chứ không phải trang web

background-image: url("image.png");

Nhưng tại sao chúng ta không thể viết URL mà không có một số chức năng ưa thích? . Ví dụ. Độ dốc

background-image: linear-gradient(red,yellow);

Vâng, độ dốc là hình ảnh trong CSS. Nếu bạn thấy điều này khó nhớ như tôi, hãy sử dụng tốc ký nền. Nó ghi nhớ cho bạn 😄

Nói lại

Tài sản.

background-image: url("image.png");

3 Giá trị mặc định.

background-image: url("image.png");

4

background-image: url("image.png");

3 xác định điều gì sẽ xảy ra, nếu hình ảnh nhỏ hơn phần tử mà nó dùng làm nền cho

Các giá trị có thể có của

background-image: url("image.png");

3 được hiển thị tốt hơn so với thông báo

Kích thước

Tài sản.

background-image: url("image.png");

7 Giá trị mặc định.

background-image: url("image.png");

8

Thuộc tính này kiểm soát kích thước của hình nền. Hầu hết thời gian nó được sử dụng với một trong hai từ khóa

```
background-image: url("image.png");
```
9 - Nó lấp đầy (bao phủ) toàn bộ khu vực của phần tử bằng hình ảnh mà không kéo dài. Ngay cả khi điều đó có nghĩa là các phần của hình ảnh sẽ không hiển thị
```
background-image: linear-gradient(red,yellow);
```
0 - Ngược lại với
```
background-image: url("image.png");
```
9. Nó đảm bảo rằng toàn bộ hình ảnh vừa vặn (được chứa) trong phần tử mà không bị nén

Trừ khi

background-image: url("image.png");

7 được đặt thành

background-image: linear-gradient(red,yellow);

3, việc đặt

background-image: linear-gradient(red,yellow);

4 sẽ dẫn đến hình ảnh xếp chồng

Giá trị của

background-image: url("image.png");

7 cũng có thể là phần trăm hoặc độ dài (

background-image: linear-gradient(red,yellow);

6,

background-image: linear-gradient(red,yellow);

7,

background-image: linear-gradient(red,yellow);

8, v.v. )

Giá trị phần trăm có liên quan đến kích thước của phần tử hoặc cụ thể hơn là khu vực được chỉ định bởi

background-image: linear-gradient(red,yellow);

9. Thông tin thêm về tài sản đó sau

background-image: url("image.png");

7 có thể được đặt bằng cú pháp một giá trị hoặc hai giá trị

Khi chỉ có một giá trị được cung cấp, giá trị này sẽ đặt chiều rộng của hình ảnh. Chiều cao được đặt tự động để duy trì tỷ lệ
Khi hai giá trị được cung cấp, giá trị đầu tiên đặt chiều rộng và giá trị thứ hai đặt chiều cao

Khi sử dụng hai giá trị, hình ảnh có thể bị kéo dài. Để tránh kéo dài, hãy đặt một giá trị bằng cách sử dụng độ dài/phần trăm và giá trị còn lại bằng cách sử dụng từ khóa

background-image: url("image.png");

41

Hình ảnh 250 x 125 trong hộp 300 x 300. Các phần bán trong suốt thể hiện hình ảnh ốp lát với nền lặp lại. nói lại

Chức vụ

Tài sản.

background-image: url("image.png");

42 Giá trị mặc định.

background-image: url("image.png");

43

Có thể bạn đã nhận thấy rằng khi chúng tôi thay đổi kích thước của một phần tử, phần tử đó vẫn được dán vào góc trên cùng bên trái. Chúng ta có thể thay đổi điều đó bằng cách sử dụng

background-image: url("image.png");

42

Có bốn từ khóa chúng ta có thể sử dụng. ________ 245, ________ 246, ________ 247 và ________ 248. Cũng như bất kỳ giá trị độ dài hoặc tỷ lệ phần trăm nào

Giống như

background-image: url("image.png");

7, chúng ta có thể sử dụng cú pháp một giá trị hoặc hai giá trị

Khi sử dụng một giá trị, giá trị này sẽ đặt vị trí nằm ngang (trục x) của hình ảnh. Vị trí dọc (trục y) mặc định là 50%
Khi sử dụng hai giá trị, giá trị đầu tiên đặt vị trí nằm ngang và giá trị thứ hai. theo chiều dọc

GHI CHÚ. Các giá trị độ dài đặt khoảng cách từ góc trên cùng bên trái của hình ảnh đến góc trên cùng bên trái của phần tử. Giá trị phần trăm và từ khóa đặt vị trí của điểm giữa của hình ảnh trên một trục nhất định

Kết hợp

background-image: url("image.png");

00 với

background-image: url("image.png");

01 hoặc

background-image: linear-gradient(red,yellow);

0 là một cách dễ dàng để đạt được hình ảnh phản hồi, tỷ lệ phù hợp với phần tử và trang

📌 Tệp đính kèm

Tài sản.

background-image: url("image.png");

03 Giá trị mặc định.

background-image: url("image.png");

04

background-image: url("image.png");

03 cho phép bạn kiểm soát cách hình nền của bạn phản ứng với việc cuộn

giá trị có thể là

```
background-image: url("image.png");
```
04 - Cuộn theo trang nhưng không cuộn theo nội dung của phần tử
```
background-image: url("image.png");
```
07 - Đã sửa lỗi cho khung nhìn. Hoạt động như một cửa sổ cho một cái gì đó đằng sau trang
```
background-image: url("image.png");
```
08 - Cuộn với trang và nội dung của phần tử

Nếu bạn bối rối vì điều đó, đừng lo lắng. Thật khó hiểu nếu không có ví dụ. Chơi xung quanh với bản demo bên dưới cho đến khi bạn hiểu rõ hơn về cách thức hoạt động của thuộc tính này

Xem Ví dụ về tệp đính kèm nền bút của Ematte (@ematte) trên CodePen. Nguồn gốc

Tài sản.

background-image: linear-gradient(red,yellow);

9 Giá trị mặc định.

background-image: url("image.png");

10

Thuộc tính này đặt nguồn gốc của nền. Nó sử dụng ba từ khóa

```
background-image: url("image.png");
```
11 - Nền bắt đầu từ mép ngoài của đường viền. Nó nằm bên dưới nó, bạn có thể thấy nếu đường viền là bán trong suốt,
```
background-image: url("image.png");
```
12 hoặc
```
background-image: url("image.png");
```
13
```
background-image: url("image.png");
```
10 - Nền bắt đầu từ mép trong của đường viền
```
background-image: url("image.png");
```
15 - Nền bắt đầu từ nơi nội dung của phần tử xuất hiện

Ví dụ này giả sử lặp lại nền. không lặp lại;

Cả

background-image: url("image.png");

42 và

background-image: url("image.png");

7 đều liên quan đến hộp được đặt bởi thuộc tính này

Kẹp

Tài sản.

background-image: url("image.png");

18 Giá trị mặc định.

background-image: url("image.png");

11

Mặc dù

background-image: url("image.png");

18 chia sẻ hầu hết các giá trị của nó với

background-image: linear-gradient(red,yellow);

9 và kết quả của chúng có thể trông giống nhau, nhưng chúng thực sự khá khác nhau

Thuộc tính này không sửa đổi vị trí của nền theo bất kỳ cách nào

Nó cắt nền vào hộp đã chọn. Điều này có nghĩa là bất kỳ phần nào của nền bên ngoài khu vực do thuộc tính này đặt sẽ không hiển thị

```
background-image: url("image.png");
```
11 - Nền được cắt bớt vào mép ngoài của đường viền. Nó sẽ hiển thị dưới đường viền, phần đệm và nội dung
```
background-image: url("image.png");
```
10 - Nền được cắt bớt vào mép trong của đường viền. Nó sẽ hiển thị dưới phần đệm và nội dung
```
background-image: url("image.png");
```
15 - Nền được cắt bớt vào khu vực nội dung. Nó sẽ chỉ hiển thị dưới nội dung của phần tử
```
background-image: url("image.png");
```
25 - Nền sẽ chỉ hiển thị dưới nội dung văn bản của phần tử. Đảm bảo đặt
```
background-image: url("image.png");
```
26 để xem nền. Điều này có thể được sử dụng để đạt được một số hiệu ứng thú vị như văn bản chuyển màu

GHI CHÚ. Nếu khu vực được thiết lập bởi
background-image: url("image.png");
18 nhỏ hơn khu vực được thiết lập bởi
background-image: linear-gradient(red,yellow);
9, các phần bên ngoài của hình ảnh sẽ bị cắt. Hãy chắc chắn rằng không có gì quan trọng ở đó

lớp

Tất cả các thuộc tính nền, ngoại trừ

background-image: url("image.png");

1 chấp nhận nhiều giá trị, được phân tách bằng dấu phẩy. Đó là bởi vì mỗi phần tử có thể có nhiều lớp nền

background-image: url("image.png");

4

Giá trị đầu tiên (ngoài cùng bên trái) tương ứng với lớp trên cùng. Giá trị cuối cùng (ngoài cùng bên phải), là lớp dưới cùng

Nhưng việc quản lý các lớp trên nhiều thuộc tính có thể trở nên lộn xộn khá nhanh. Ví dụ. Điều gì sẽ xảy ra nếu bạn quyết định thêm một lớp hình ảnh khác ở trên cùng của ngăn xếp lớp nhưng lại quên cập nhật các thuộc tính

background-image: url("image.png");

20 khác?

Vấn đề này có thể được ngăn chặn bằng cách sử dụng tốc ký nền

Tôi hy vọng phần giới thiệu này làm cho chủ đề này dễ hiểu hơn và có thể dùng làm tài liệu tham khảo nếu bạn cần ôn lại

CSS bìa nền là gì?

bìa. Chia tỷ lệ hình ảnh (trong khi vẫn giữ nguyên tỷ lệ của nó) thành kích thước nhỏ nhất có thể để lấp đầy vùng chứa (nghĩa là. cả chiều cao và chiều rộng của nó bao phủ hoàn toàn vùng chứa), không để lại khoảng trống. Nếu tỷ lệ của nền khác với phần tử, hình ảnh sẽ được cắt theo chiều dọc hoặc chiều ngang.

Chúng ta có thể sử dụng nền trong CSS không?

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.

Kích thước nền trong CSS là gì?

Giá trị tài sản

programming css

Nền tảng của CSS là gì?

CSS bìa nền là gì?

Chúng ta có thể sử dụng nền trong CSS không?

Kích thước nền trong CSS là gì?

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