Diễn đàn Share Info

[ Bài viết mới · Thành viên · Nội quy diễn đàn · Tìm kiếm · RSS ]

Page 1 of 1
1

CSS Tip : Mẹo với link chứa ảnh (CSS Tip : Mẹo với link chứa ảnh)

CSS Tip : Mẹo với link chứa ảnh

chugatrongchoai

Date: Chủ Nhật, 2013/08/04, 8:56 PM | Message # 1

Tân Binh đạt Huy chương

Nhóm: Sáng lập viên

Bài viết: 220

Huy chương: 9

Bài viết này tôi sẽ hướng dẫn các bạn mẹo nhỏ với link chứa ảnh (thẻ img nằm trong thẻ a) với thuộc tính font-size và pseudo-class.
Thẻ a ôm sát thẻ img
Giả sử ta có mã html như sau:

Code

Và mã css:

Code

body{
     background-color:#e1e1e1;
}

a{
     display:block;
     background-color:#fff;
}

Tuy nhiên khi hiển thị lên trình duyệt thẻ a sẽ không ôm sát thẻ img mà vẫn chừa ra một khoảng dưới đáy.
Để làm mất khoảng thừa này đi ta có 2 cách sau:

Code

a{
font-size:0;
}

Hoặc

Code

img{
display:block;
}

Phủ pattern lên ảnh với pseudo-class
Ta vẫn có cấu trúc html như trên:

Code

Sử dụng pseudo-class của thẻ a để làm lớp phủ:

Code

a{
     display:block;
     position:relative;
     font-size:0;
}

a:before{
     content:"";
     posittion:absolute;
     left:0;
     top:0;
     width:100%;
     height:100%;
     background:url(../img/pattern.png);
}

Chữ ký: http://windowsworld.ucoz.com/
http://shareinfo.ucoz.org/
https://www.facebook.com/hdoantrannam

CSS Tip : Mẹo với link chứa ảnh (CSS Tip : Mẹo với link chứa ảnh)

Page 1 of 1
1

Chia sẻ thông tin - Share Info