สอบถาม ต้องการให้ปุ่มไอคอนทับซ้อนกันในวงกลมทำยังไงคะ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

hayatee
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 670
ลงทะเบียนเมื่อ: 19/04/2021 10:01 am

สอบถาม ต้องการให้ปุ่มไอคอนทับซ้อนกันในวงกลมทำยังไงคะ

โพสต์ที่ยังไม่ได้อ่าน โดย hayatee »

HTML CSS-1.png
HTML CSS-1.png (5.16 KiB) Viewed 2653 times
ต้องการให้รูปภาพทับซ้อนกันค่ะ
Ellipse 2.png
Ellipse 2.png (1.11 KiB) Viewed 2655 times
Vector.png
Vector.png (429 ไบต์) Viewed 2655 times
Ellipse 3.png
Ellipse 3.png (224 ไบต์) Viewed 2653 times
ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16183
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

Re: สอบถาม ต้องการให้ปุ่มไอคอนทับซ้อนกันวงกลมทำยังไงคะ

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

กำหนด css ให้กับ 2 ตัวนี้โดยที่
ตัววงกลม

โค้ด: เลือกทั้งหมด

.Ellipse{
position: relative;
width: 40px;
height: 40px;
z-index:10;
}
ตัวลูกศร

โค้ด: เลือกทั้งหมด

.Vector{
position: absolute;
/*left right top bottom ส่วนขยับตำแหน่งที่ลูกศรอยู่บนวงกลม*/
left: 17.77%;
right: 17.77%;
top: 26.56%;
bottom: 26.56%;
z-index:auto;
}
ส่วน html เราใส่ class ที่ตัวรูปภาพที่กำหนด css เอาไว้เช่น

โค้ด: เลือกทั้งหมด

<img class="Ellipse" src="Ellipse.png" />
<img class="Vector" src="Vector.png" />
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41231
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถาม ต้องการให้ปุ่มไอคอนทับซ้อนกันในวงกลมทำยังไงคะ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ยังติดปัญหาอยู่ไหมครับ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
hayatee
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 670
ลงทะเบียนเมื่อ: 19/04/2021 10:01 am

Re: สอบถาม ต้องการให้ปุ่มไอคอนทับซ้อนกันในวงกลมทำยังไงคะ

โพสต์ที่ยังไม่ได้อ่าน โดย hayatee »

ยังติดปัญหาอยู่ค่ะ ไอคอนที่วางไม่เข้าอยู่ในวงกลมค่ะ
HTML CSS-1.png
HTML CSS-1.png (3.39 KiB) Viewed 2602 times

โค้ด: เลือกทั้งหมด

 <img class="Ellipse" src="images/Ellipse 2.png" /><img class="Vector" src="images/Vector.png" />
ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16183
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

Re: สอบถาม ต้องการให้ปุ่มไอคอนทับซ้อนกันในวงกลมทำยังไงคะ

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

hayatee เขียน: 20/07/2021 12:51 pm ยังติดปัญหาอยู่ค่ะ ไอคอนที่วางไม่เข้าอยู่ในวงกลมค่ะ
HTML CSS-1.png

โค้ด: เลือกทั้งหมด

 <img class="Ellipse" src="images/Ellipse 2.png" /><img class="Vector" src="images/Vector.png" />
ให้วงกลมเป็น background แล้วให้ใส่ div ครอบรูปลูกศรเอาไว้

โค้ด: เลือกทั้งหมด

<style>
.Ellipse{
position: relative;
width: 45px;
height: 45px;
background-image: url("Ellipse 2.png");
background-repeat: no-repeat, repeat;
}
.Vector{
position: absolute;
left: 17.77%;
right: 17.77%;
top: 26.56%;
bottom: 26.56%;
z-index:auto;
}
</style>
ส่วนใน html

โค้ด: เลือกทั้งหมด

<div class=Ellipse>
<img class="Vector" src="Vector.png" /></div>
HTML CSS-1.png
HTML CSS-1.png (1.69 KiB) Viewed 2599 times
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 70