Forum đề thi casio

Tình hình diễn đàn

Thống kê bài viết mới


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Hiệu ứng làm mờ hình Empty Hiệu ứng làm mờ hình Tue Aug 02, 2011 2:09 pm

admin

admin
Admin
Admin
Loading
Hôm nay
mình sẽ hướng dẫn mọi người cách tùy chỉnh độ trong suốt hình ảnh trong
website cá nhân hoặc 1 trang blog bất kì. Dòng code cực kì ngắn gọn hơn
những trang thủ thuật khác vì mình đã xóa đi những phần không cần thiết.

Code css:

Code:
img
{
  opacity: 0.5;
}
img:hover
{
  opacity: 0.9;
}


Code nhúng:

Code:
<style>
img
{
  opacity: 0.5;
}
img:hover
{
  opacity: 0.9;
}
</style>


Giải thích:
-img: là hình ảnh mặc định trên website, blog (tức là khi chưa rê chuột vào nó)
-img:hover là hình ảnh khi rê chuột lên nó
-opacity: thay đổi độ trong suốt (thông số lớn thì độ trong suốt nhỏ
Như vậy đoạn code trên có tác dụng làm mờ ảnh bình thường và sẽ sáng ảnh lên khi rê chuột
Nếu bạn muốn tác dụng ngược lại thì chỉ cần dùng đoạn code sau.



Code css:

Code:
img
{
  opacity: 0.9;
}
img:hover
{
  opacity: 0.5;
}



Code nhúng:

Code:
<style>
img
{
  opacity: 0.9;
}
img:hover
{
  opacity: 0.5;
}
</style>


Ngoài ra bạn có thể tùy chỉnh thông số thích hợp cho riêng mình vẫn được.
Tuy
nhiên đoạn code trên sẽ áp dụng cho tất cả hình ảnh trong website của
bạn, vì thế hãy thu nhỏ phạm vi ảnh hưởng của nó. Ví dụ chỉ muốn hình
ảnh trong phần bài viết bị ảnh hưởng thì dùng đoạn code sau đây:


Code:
<style>
.bText img
{
  opacity: 0.9;
}
.bText img:hover
{
  opacity: 0.5;
}
</style>




Giải thích:
.bText : là đối tượng chứa bài viết trong website. Nếu dùng với đối tượng khác thì đổi tên lại nhé.

Code Css past ở đâu [You must be registered and logged in to see this image.](Hỏi hoài zậy ta?nói oy` mà): Quản lý blog ------> Giao diện ------->Mã thiết kế(Khung Css code). [You must be registered and logged in to see this image.]
Còn code nhúng blog [You must be registered and logged in to see this image.](Phù):Đặt trong thẻ ạ!


Chúc các bạn thành công!





http://www.leducduy.com

View previous topic View next topic Back to top  Message [Page 1 of 1]

Bài viết mới cùng chuyên mục

    Bài viết liên quan vớiHiệu ứng làm mờ hình

      Permissions in this forum:
      You cannot reply to topics in this forum