[ 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
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » 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
chugatrongchoaiDate: 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
<body>
     <a href="#"><img src="img/picture.jpg"/></a>
</body>


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
<a href="#"><img src="img/picture.jpg"/></a>

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
 
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » 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
Search:

Chat ()