30/09/2018, 19:26

Hỏi Về LT WEB <HELP>

-Bác nào cao tay cho hỏi làm thế nào để có thể lồng 1 icon vào giữa của bức ảnh được ạ
VD: em có một tấm ảnh vào em muốn lồng icon kính lúp hoặc một hình vuông vào center của bức ảnh thì phải làm thế nào ạ
em đã tham khảo hết trên bác google mà vẫn chưa tìm thấy đành nhờ các thánh cáo tay ạ

asdasdasd viết 21:34 ngày 30/09/2018

<div id="image">
    <i class='icon'></i>
</div>

#image : background-image: url();

VietNT viết 21:28 ngày 30/09/2018

Div#image {
position: relative:
width:320px:
Height:320px;
Backgroung: url();
}

.icon {
Display:block:
Width:16px;
Height:16px;
Background:url();
Position: absolute;
Top: 0;
Left:0;
Right:0;
Bottom:0;
Margin: auto;
}

Cương Nguyễn viết 21:37 ngày 30/09/2018

code cua ban chua cho ra duoc center, vi top:0;

VietNT viết 21:27 ngày 30/09/2018

Bạn thử chưa. Khi bạn set absolute với 4 thuộc tính top, left, right, bottom bằng 0 thì nó set center nhé.

Cương Nguyễn viết 21:31 ngày 30/09/2018

bạn giải thích vậy không đúng lắm, khi set top: 0;left:0;right:0;bottom:0; thì thẻ con sẽ fit 100% width, height với thẻ cha.
sau đó bác set width và height cho nó và margin: auto để căn giữa cả left right, top bottom.

Code của bác chạy good khi bỏ display:block đi nhé.

VietNT viết 21:28 ngày 30/09/2018

Div#image { position: relative: width:320px: Height:320px; Backgroung: url();}

.icon { Display:block: Width:16px; Height:16px; Background:url(); Position: absolute; Top: 0; Left:0; Right:0; Bottom:0; Margin: auto;}

bạn có thể tham khảo ở đây,
Mình thêm display: block để cho 1 số tag như span, strong … nếu không set thuộc tính display thì sẽ không có width và height.

Lưu Duy Anh viết 21:32 ngày 30/09/2018

mình cảm ơn bạn nhé code rất chi tiết và có demo nên mình xem đã hiểu hơn

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

Lưu Duy Anh

0 chủ đề

0 bài viết

Tác giả nổi bật