[7] Giáo DụcCSS Tutorial

Hình ảnh (image) trong CSS

Trong các bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về thuộc tính Text trong CSS. Để tiếp tục chuỗi bài học về CSS, trong bài học dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về hình ảnh trong CSS hay iMages CSS.

Hình ảnh đóng vai trò quan trọng đối với hầu hết tất cả các trang web. Chúng ta không nhất thiết phải sử dụng nhiều hình ảnh trên trang web mà chỉ cần sử dụng “đúng thời điểm” và đúng vị trí để người đọc đỡ bị rối mắt vì quá nhiều text.

Hinh anh image trong CSS

Hình ảnh (image) trong CSS

CSS đóng vai trò quan trọng trong việc kiểm soát cách thức hiển thị hình ảnh. Trong CSS, chúng ta có thể thiết lập các thuộc tính hình ảnh (image) dưới đây:

– Thuộc tính border được sử dụng để thiết lập chiều rộng đường viền của hình ảnh.

– Thuộc tính height được sử dụng để thiết lập chiều cao của hình ảnh.

– Thuộc tính width được sử dụng để thiết lập chiều rộng hình ảnh.

– Thuộc tính -moz-opacity được sử dụng để thiết lập độ trong suốt của hình ảnh.

Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết các thuộc tính hình ảnh (image) trong CSS.

1. Thuộc tính Image Border trong CSS

Thuộc tính Image Border trong CSS được sử dụng để thiết lập chiều rộng đường viền của hình ảnh. Giá trị của thuộc tính này có thể là đơn vị đo độ dài hoặc đơn vị %.

Nếu giá trị được thiết lập là 0 pixel tức là hình ảnh không có đường viền.

Ví dụ:

hinh anh image trong css

Đoạn mã trên trả về kết quả đầu ra như dưới đây:

Hình ảnh (image) trong CSS - Anh Dũng SEO

2. Thuộc tính Image Height trong CSS

Thuộc tính Height trong CSS được sử dụng để thiết lập chiều cao của hình ảnh. Giá trị của thuộc tính này có thể là đơn vị đo chiều cao hoặc %. Nếu tí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ụ:

Hình ảnh (image) trong CSS - Anh Dũng SEO

Đoạn mã trên trả về kết quả đầu ra như dưới đây:

Hình ảnh (image) trong CSS - Anh Dũng SEO

3. Thuộc tính Image Width trong CSS

Thuộc tính Image Width trong CSS được sử dụng để thiết lập chiều rộng của hình ảnh. Thuộc tính này có thể sử dụng giá trị chiều rộng hoặc %. Nếu tính bằng đơn vị %, chiều rộng của hình ảnh sẽ được tính tỷ lệ với khối chứa hình ảnh đó.

Ví dụ:

Hình ảnh (image) trong CSS - Anh Dũng SEO

Đoạn mã trên trả về kết quả đầu ra như dưới đây:

Hình ảnh (image) trong CSS - Anh Dũng SEO

4. 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 hình ảnh. Thuộc tính này được sử dụng để tạo hình ảnh trong suốt trên trình duyệt Mozilla. IE sử dụng bộ lọc alpha(opacity=x) để tạo hình ảnh trong suốt.

Trên trình duyệt Mozilla (-moz-opacity:x) x có thể là giá trị bất kỳ từ 0.0 – 1.0. Giá trị càng thấp, độ trong suốt phần tử càng cao.

Trên IE, bộ lọc (filter :alpha(opacity=x)) x có thể là giá trị bất kỳ từ 0 – 100. Giá trị càng thấp, độ trong suốt phần tử càng cao.

Ví dụ:

Hình ảnh (image) trong CSS - Anh Dũng SEO

Đoạn mã trên trả về kết quả đầu ra như dưới đây:

Hình ảnh (image) trong CSS - Anh Dũng SEO

Bài học CSS trên đây Taimienphi.vn vừa giới thiệu cho bạn về thuộc tính hình ảnh (image) trong CSS. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link trong CSS.

Ngoài ra bạn đọc có thể tham khảo một số bài viết khác đã có trên Taimienphi.vn để tìm hiểu thêm thuộc tính background trong CSS nhé.

Anh Dũng Seo

Tôi là Mai Anh Dũng hay còn gọi là Anh Dũng SEO, tôi viết blog để chia sẻ đến các bạn kiến thức MMO, Marketting, thủ thuật, công nghệ và các mẹo nhỏ.

Bài viết liên quan

Trả lời

Back to top button