Hiệu ứng Hình ảnh Trong CSS

Có thể bạn quan tâm

CSS cơ bản
Giới thiệu CSS
CSS là gì ?
Cú pháp CSS
Include CSS vào HTML
Đơn vị
Màu (Color)
Background
Định dạng Font
Định dạng Text
Hình ảnh
Trang trí Link
Bảng
Đường viền (Border)
Căn lề (Margin)
List và Marker
Padding
Con trỏ (Cursor)
Outline
Kích thước
Scrollbar

CSS nâng cao
Visibility
Căn chỉnh vị trí
Layer (Thuộc tính z-index)
Giới thiệu Pseudo Class
Phần tử giả (Pseudo Element)
Qui tắc @
Media Type
Qui tắc @page
Định dạng trước khi in
Thiết lập Layout
Validation

Học CSS3 cơ bản
Giới thiệu CSS3
Rounded Corner
Thuộc tính Border Image
Multi Background
Màu trong CSS3
Gradient là gì ?
Tạo Shadow
Tạo hiệu ứng cho Text
Web Font
2D Transform
3D Transform
Hiệu ứng (Animation)
Chia cột (Multi Column)
User Interface
Thuộc tính box-sizing

Khái niệm CSS Responsive
CSS Responsive là gì ?

Tra cứu nhanh CSS
Tổng hợp tất cả Thuộc tính
Danh sách tên màu
Web Safe Font
Tổng hợp các Hiệu ứng

CSS Tool
Chuyển đổi PX sang EM

Hiệu ứng Hình ảnh trong CSS Trang trước Trang sau

Hình ảnh đóng vai trò quan trọng trong bất kỳ Webpage nào. Hiện này, khó có thể tìm thấy một Webpage hiện đại nào mà không có hình ảnh. Tuy nhiên, không phải cứ thêm quá nhiều hình ảnh (trừ các Webpage cho thời trang hay mẫu quần áo) là tốt. Việc trang trí hình ảnh đẹp và hợp lý sẽ làm trang của bạn tạo ấn tượng với người dùng.

Để làm cho hình ảnh đẹp hơn, bạn có thể sử dụng các thuộc tính trong CSS. CSS có các thuộc tính:

Thuộc tính border: Thiết lập độ rộng của đường viền bao quanh hình ảnh.
Thuộc tính height: Thiết lập chiều cao của hình ảnh.
Thuộc tính width: Thiết lập độ rộng của hình ảnh.
Thuộc tính –moz-opacity: thiết lập độ trong suốt của hình ảnh.

Thuộc tính border trong CSS

Để thiết lập độ rộng của đường viền bao quanh hình ảnh, bạn sử dụng thuộc tính border trong CSS. Thuộc tính này có thể nhận giá trị: độ dài đo bằng px hoặc %..

Nếu thiết lập giá trị là 0px, nghĩa là hình ảnh của bạn không có đường viền bao quanh.

Ví dụ

kết quả là

Quảng cáo

Thuộc tính height trong CSS

Để điều khiển chiều cao của hình ảnh hiển thị trong Webpage, bạn có thể sử dụng thuộc tính height trong CSS. Thuộc tính này có thể nhận giá trị: chiều cao đo bằng px hoặc %. Nếu được xác định bằng đơn vị %, chiều cao của hình ảnh sẽ được tính tỷ lệ với khối chứa hình ảnh đó.

Ví dụ−

Kết quả là:−

Thuộc tính width trong CSS

Để xác định độ rộng của hình ảnh, bạn có thể sử dụng thuộc tính width trong CSS. Thuộc tính này có thể nhận giá trị: độ rộng đo bằng px hoặc %. Nếu được xác định bằng đơn vị %, độ rộng của hình ảnh sẽ được tính tỷ lệ với khối chứa hình ảnh đó.

Ví dụ−

Kết quả là:

Quảng cáo

Thuộc tính - moz-opacity trong CSS

Thuộc tính -moz-opacity trong CSS được sử dụng để thiết lập độ trong suốt của hình ảnh. Trong Mozilla, thuộc tính này sẽ tạo một hình ảnh trong suốt. IE sử dụng filter:alpha(opacity=x) để tạo các hình ảnh trong suốt.

Trong Mozilla: với cú pháp -moz-opacity=x thì x có thể là một giá trị từ 0.0 – 1.0. Giá trị càng nhỏ thì càng làm tăng độ trong suốt. (tương tự như cú pháp trong CSS3 là: opacity:x).

Trong IE: với cú pháp filter:alpha(opacity=x) thì x có thể là một giá trị từ 0 – 100. Giá trị càng nhỏ thì càng làm tăng độ trong suốt.

Ví dụ

Kết quả là:

👉 Giải bài nhanh với AI Hay:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS. Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: