Hướng dẫn cách bo tròn ảnh với CSS3 và jQuery

Xem: 1059    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Máy tính - công nghệ

9 điểm   ( 5 đánh giá ) File đã được kiểm thử

Một vấn đề với thuộc tính border-radius là Firefox không hiển thị đúng khung tròn ở trên ảnh. Có một cách là sử dụng thẻ span bao quanh thẻ img và sử dụng thuộc tính background-image.

Mục tiêu

Mục tiêu là có thể tạo được ảnh như hình bên dưới

Vấn đề

Các trình duyệt đều không hỗ trợ việc hiển thị mềm và mượt như mục tiêu đưa ra. Webkit hiển thị khung tròn nhưng không hỗ trợ khối đổ bóng, còn firefox thì khung bo tròn không hiển thị.

Thủ thuật CSS

Bạn có thể xử lý vấn đề trên rất đơn giản: bo tròn 1 thẻ span bên ngoài thẻ image. Đặt ảnh là hình nền của span, sau đó ẩn ảnh đi (có thể dùng opacity: 0 hoặc display: none). Tác giả dùngopacity: 0 vì lý do bạn vẫn có thể copy hoặc lưu ảnh lại.

Sử dụng jQuery

Chúng ta sẽ sử dụng jQuery để tự động thêm thẻ span. Đoạn mã dưới sẽ tự động tìm tất cả các phần tử có class .rounded và thêm thẻ span ra bên ngoài. Sau đó sẽ thêm thuộc tính background, width, height và đặt opacity: 0 cho ảnh gốc.

$(document).ready(function(){
	  $(".rounded").load(function() {
	    $(this).wrap(function(){
	      return '<span class="' + $(this).attr('class') + '" style="background:url('+ $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() +'px; height: ' + $(this).height() + 'px;" />';
	    });
	    $(this).css("opacity","0");
	  });
	});

Mã CSS3

.rounded {
	    display: inline-block;
	    border: solid 1px #000;
	    overflow: hidden;
	    -webkit-border-radius: 10px;
	    -moz-border-radius: 10px;
	    border-radius: 10px;
	    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	}

Bạn có thể sử dụng để làm avatar trong phần bình luận hoặc bất cứ phần nào khác (có thể đợt tới mình sẽ áp dụng vào ntuts)Đoạn mã trên hoạt động với tất cả các kích thước ảnh, không có yêu cầu đặc biệt khác & bạn có thể sử dụng kèm với các mã CSS khác.

Hướng dẫn cách bo tròn ảnh với CSS3 và jQuery

Hướng dẫn cách bo tròn ảnh với CSS3 và jQuery Đăng ngày 04-10-2013  Một vấn đề với thuộc tính border-radius là Firefox không hiển thị đúng khung tròn ở trên ảnh. Có một cách là sử dụng thẻ span bao quanh thẻ img và sử dụng thuộc tính background-image. 1.8/10 1059

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;