Trang chủ Liên hệ Sơ đồ  
 
Trang chủ 1001 Mẫu Web Thiết kế Web Lập trình Quản trị Web Web & Hosting Hình nền Blog Icon & Logo
 
 
     
       Mẫu web mới nhất
Xem | ID: 9173
Xem | ID: 2270
HƯỚNG DẪN
Phần mềm :
Trình độ : Beginer
Đánh giá : /

Crop ảnh bằng CSS và HTML
(Thứ Sáu, 29/01/2010-3:23 PM)

Chúng ta có ví dụ sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>untitled</title>

<style type="text/css" media="screen">
div.crop {
  height: 300px;
  width: 350px;
  overflow: hidden;
}
div.crop img {
  margin: -300px -200px 0 0;
}
</style>

</head>

<body>

<div class="crop">
<img src="/paper-sculpture-large.jpg" class="crop" alt="Paper Sculpture Large">
</div>

</body>
</html>

Chúng ta sẽ quy định kích thước của khung Crop trong đoạn mã CSS sau:

div.crop {
height: 300px;
width: 350px;
overflow: hidden;
}

và lấy một vùng ảnh nào đó

div.crop img {
margin: -300px -200px 0 0;
}
Theo cssyeah.com
   "Tìm hiểu Vũ trụ mênh mông huyền bí"     www.bachkhoatrithuc.vn
 In bài này  Gửi bài viết
    Các bài trước
    Các bài sau
      Bài quan tâm nhiều nhất  
    Cách tạo RSS trong ASP.NET
    Chữ chuyển động quanh khối cầu (Phần 2)
    Flash - Clicking game
    Macromedia Flash - Tạo mask nâng cao với action script
    Macromedia Flash - Chuyển đổi hình ảnh có hiệu lực

    Download phần mềm 
    được ưa dùng  nhất