7 thuộc tính nền CSS để làm sống động các thiết kế web của bạn
Chủ đề nền của trang web của bạn có thể ảnh hưởng đáng kể đến giao diện của nó. Màu sắc, hình ảnh và mẫu nền khơi gợi cảm xúc và tạo ra trải nghiệm tuyệt vời cho người dùng.
Bạn có thể sử dụng các thuộc tính nền CSS để đặt kiểu nền cho các phần tử HTML. Tìm hiểu tất cả về một số thuộc tính CSS mà bạn có thể sử dụng để tạo nền xuất sắc.
Mục Lục
1. màu nền
Thuộc tính màu nền thiết lập màu nền của phần tử. Bạn có thể đặt màu bằng tên như “đỏ”, giá trị HEX như “#00FF00” hoặc giá trị RGB – như “rgb(0, 255, 0)”. Bạn cũng có thể sử dụng giá trị HSL để đặt màu nền bằng màu sắc, độ bão hòa và độ sáng.
Ví dụ sau đặt màu nền của toàn bộ trang thành màu cam. Mỗi phần tử tiêu đề có một nền khác nhau.
<body>
<h2>I am Green</h2>
<h3>I am Red</h3>
<h4>I am Blue</h4>
</body>
Sử dụng CSS, bạn có thể áp dụng một màu nền duy nhất cho từng thành phần:
body {
background-color: orange;
}h2 {
background-color: #006600;
}
h3 {
background-color: rgb(128, 0, 0);
}
h4{
background-color: hsl(240, 100%, 50%);
}
Điều này sẽ tạo kiểu cho trang trông giống như:
Bạn có thể sử dụng thuộc tính opacity để xác định độ trong suốt của một phần tử. Độ mờ có giá trị từ 0,0 đến 1,0. Giá trị càng thấp, phần tử càng trong suốt.
Ví dụ: hãy thử đặt độ mờ của thành phần cơ thể thành 0,5:
body {
background-color:orange;
opacity:0.5;
}
Điều này sẽ hiển thị như sau—so sánh màu sắc với những màu trong ảnh chụp màn hình trước đó:
2. hình nền
Thuộc tính background-image đặt một hình ảnh làm nền của một phần tử. Bạn có thể tham khảo một hình ảnh cục bộ hoặc một hình ảnh từ internet.
<body>
<h1>Hello there!</h1>
<p>I have an image in my background!</p>
</body>
Tệp CSS:
body {
background-image:url("https://images.pexels.com/photos/1191710/pexels-photo-1191710.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
}
Điều này sẽ hiển thị như vậy:
Bạn cũng có thể sử dụng chuyển màu nền để tạo giao diện độc đáo cho ứng dụng của mình.
3. lặp lại nền
Thuộc tính hình nền lặp lại hình ảnh theo mặc định. Bạn có thể chọn lặp lại hình ảnh theo chiều ngang trên trục x hoặc theo chiều dọc trên trục y.
Ngoài ra, nếu lặp lại không phù hợp với phong cách của bạn, bạn có thể xóa nó bằng cách sử dụng giá trị không lặp lại.
<body>
<h1>Hello There!</h1>
<h3>I am demonstrating the repeat background-repeat property on the x-axis!</h3>
</body>
Sử dụng CSS sau để áp dụng nền lặp lại dọc theo trục x:
body {
background-image: url("https://images.pexels.com/photos/459335/pexels-photo-459335.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-repeat: repeat-x;
}
Kết quả:
Tiếp theo, hãy thử lặp lại hình ảnh trên trục y:
body {
background-image:url("https://cdn.pixabay.com/photo/2016/04/18/22/05/seashells-1337565__340.jpg");
background-repeat:repeat-y;
}
Kết quả:
Ví dụ trên trục y chắc chắn trông có vẻ méo mó. Nếu đây không phải là những mẫu bạn đang tìm kiếm, bạn có thể chỉ định không lặp lại thay vì:
body {
background-image:url("https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=600");
background-repeat:no-repeat;
}
Kết quả:
4. vị trí nền
Thuộc tính vị trí nền xác định vị trí của hình nền trong phần tử của nó. Nó sử dụng các từ khóa dành riêng cho vị trí như trung tâm, đứng đầu, Và đáyhoặc một pixel hoặc giá trị phần trăm.
Thêm thuộc tính vị trí nền vào hình ảnh cuối cùng:
body {
background-image: url("https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=600");
background-position: top center;
}
Nó sẽ trông giống thế này:
Bạn có thể thấy hình ảnh làm biến dạng giao diện của trang web. Hãy khắc phục điều đó với thuộc tính tiếp theo.
5. kích thước nền
Bạn có thể sử dụng thuộc tính hình nền để xác định kích thước cụ thể cho hình ảnh. Nó sử dụng các từ khóa như che phủ Và bao gồm hoặc một pixel hoặc giá trị phần trăm. Hãy sửa ảnh nền bị biến dạng bằng cách thêm thuộc tính kích thước nền.
body {
background-image: url("https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=600");
background-repeat: no-repeat;
background-position: center;
Kết quả cho thấy hình ảnh hiện bao phủ trang web theo tỷ lệ.
6. nền đính kèm
Thuộc tính background-attachment xác định xem vị trí hình nền vẫn cố định hay cuộn. Bạn có thể sử dụng các từ khóa cố định hoặc cuộn.
Hãy chỉ ra điều đó trong đoạn mã sau:
<body>
<h1>The background-attachment property</h1>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
</body>
Tệp CSS:
body {
background-image: url("https://images.pexels.com/photos/96627/pexels-photo-96627.jpeg?auto=compress&cs=tinysrgb&w=600");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
Nếu bạn di chuyển xuống trang, bạn sẽ thấy nền không di chuyển:
Để minh họa thuộc tính scroll background-attachment, hãy thay đổi từ khóa thành cuộn. Bạn sẽ nhận thấy rằng bây giờ nền di chuyển cùng với văn bản.
body {
background-image: url("https://images.pexels.com/photos/96627/pexels-photo-96627.jpeg?auto=compress&cs=tinysrgb&w=600");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: scroll;
}
7. Thuộc tính tốc ký nền
Bạn có thể nhận thấy rằng bạn cần bao gồm một số thuộc tính để có được nền hoàn hảo. Điều này liên quan đến việc viết rất nhiều mã. Nhưng bạn có thể rút ngắn mã bằng thuộc tính tốc ký nền.
Thuộc tính tốc ký cho phép bạn đặt nhiều thuộc tính nền trong một dòng. Bạn sử dụng từ khóa lý lịch để đặt thuộc tính tốc ký.
Ví dụ, thay vì viết mã như thế này:
body {
background-color: green;
background-image: url("laptop3.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachement: scroll;
background-position: center;
}
Bạn có thể viết nó trong một dòng, như thế này:
body {
background: green url("laptop3.jpg") no-repeat cover scroll center;
}
Thuộc tính tốc ký tuân theo một thứ tự cụ thể. Bạn phải sắp xếp các thuộc tính theo thứ tự đó ngay cả khi thiếu một hoặc nhiều thuộc tính. Thứ tự là:
- màu nền
- hình nền
- Bối cảnh Lặp lại
- tệp đính kèm nền
- vị trí nền
Bạn có thể tạo các thiết kế thú vị bằng CSS bằng cách sử dụng các mẫu nền khác nhau. Với những mẫu này, bạn có thể đạt được hình nền độc đáo và nổi bật cho trang web của mình.
Thuộc tính nền khác trong CSS
CSS rất mạnh và bạn có thể làm được rất nhiều điều với nó để cải thiện ứng dụng của mình. Bạn có thể sử dụng các thuộc tính như background-clip, background-origin và background-blend-mode để thêm một số hoạt ảnh.
Bạn cũng có thể sử dụng chuyển màu và mẫu để tùy chỉnh các trang của mình. Thử nghiệm với các thuộc tính nền CSS để nâng cao kỹ năng thiết kế web của bạn.
