30/09/2018, 21:07

Dùng css để cắt ảnh

mình có 1 cái ảnh như thế này

Uploading…
và yêu cầu trang là như thế này
làm sao để chuyển ảnh này thành ảnh ngang và chỉ lấy từ biểu tượng hình facebook thôi à các biểu tượng nằm ngang với nhau lấy từ facebook à thank mọi người

Võ Hoài Nam viết 23:20 ngày 30/09/2018

Bạn dùng thuộc tính background-image để load ảnh. Sau đó, dùng background-position để cắt.

Bạn inspect element ở mấy avatar tại trang này: http://ngup.github.io/#/httt

Jobs Apple Steve viết 23:09 ngày 30/09/2018

em có trang này trên mạng anh à
http://getspritexy.com/ và khi cho ảnh vào và hiển thị đoạn cần cát thì nó hiện ra đoạn code này anh
background-image:url(“icons (1).png”);
background-position: 0px -110px;
width: 18px;
height: 19px;
}
nhưng em sửa mãi mà nó vẫn bị lỗi hoài anh à @vhnam

Võ Hoài Nam viết 23:10 ngày 30/09/2018

Bác có chắc với tọa độ đó đã trúng góc trên trái của vị trí cần cắt hông?

Jobs Apple Steve viết 23:11 ngày 30/09/2018

<div id="footer">
				<img id="a" src="icons (1).png">
			    <p align="right">@COPYRIGHT 2023 MANES WINCHESTER
				.ALL RIGHTS RESERVED</p>
			</div>

và đây là đoạn css của nó anh à

#footer
{
	background-color:#adad85;
	padding-left:200px;
	padding-top:10px;
	padding-right:30px;
	padding-bottom:10px;
	clear:both;
}
#footer #a
{ 
    background-image:url("icons (1).png");
    background-position: 0px -114px; 
	width: 18px;
	height: 24px;
}

Khoa Nguyen viết 23:18 ngày 30/09/2018

Bạn dùng trang này để tạo image sprite css cho tiện

http://www.spritecow.com/

Khỏi mất công canh từng px.

Tuy nhiên dùng ảnh png cho icon không còn là giải pháp tối ưu nữa. Bạn có thể dùng font icon hoặc svg image. ( có thể tạo svg sprite)

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Jobs Apple Steve

0 chủ đề

0 bài viết