home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีสร้างการซ้อนทับ CSS พื้นฐาน

โอเวอร์เลย์เป็นเอฟเฟกต์ที่ใช้บนเว็บไซต์เพื่อนำทางผู้ใช้ไปยังทิศทางที่ถูกต้องของการดำเนินการถัดไปที่พวกเขาต้องทำ การใช้งานที่ถูกต้องสามารถสร้างประสบการณ์ที่ดีแก่ผู้ใช้ ซึ่งจะทำให้ผู้ใช้อยู่ในเว็บไซต์ของคุณ

มีหลายวิธีในการสร้างภาพซ้อนทับ ไม่มีวิธีใดที่ถูกต้อง อยู่ที่การเลือกวิธีที่ดีที่สุดสำหรับไซต์ของคุณและสิ่งที่คุณต้องการ

ในคู่มือนี้ เราจะเน้นที่การใช้ HTML และ CSS พื้นฐาน (ไม่มี JavaScript) เพื่อให้ได้เอฟเฟกต์การวางซ้อนที่คุณต้องการเมื่อวางเมาส์เหนือรูปภาพ

ปิดกั้น HTML ของคุณ

มาสร้างต้นแบบ HTML ของคุณที่จะใช้เพื่อสร้างภาพซ้อนทับของเรา:

<html>
	<head>
		<style>
			/*No CSS to display yet*/
</style>
</head>
<body>
	<div class="container" ></div>
</body>
</html>

เข้าใจปัญหา

เมื่อลองทำสิ่งใหม่ ๆ ในครั้งแรก คุณควรนั่งลงและคิดว่าควรแก้ปัญหาอย่างไรก่อนที่จะปรึกษาเครื่องมือค้นหา เมื่อคุณมีความเข้าใจอย่างถ่องแท้เกี่ยวกับวิธีการทำงานของโอเวอร์เลย์และสิ่งที่เราต้องทำ คุณจะโชคดียิ่งขึ้นในการมองหาคำแนะนำและเคล็ดลับ หากจำเป็น

โดยสรุป โอเวอร์เลย์จะทับคอนเทนเนอร์ (ในตัวอย่างของเราคือ รูปภาพ) และทำบางสิ่งกับรูปภาพเมื่อเราวางเมาส์เหนือคอนเทนเนอร์ สิ่งนี้ชี้นำผู้ใช้ให้โต้ตอบกับไซต์

ก้าวไปข้างหน้า คิดภาพรวม อย่าพยายามกรอกรายละเอียดทุกนาทีว่าต้องทำอย่างไร เรามีรูปภาพและเรามีโอเวอร์เลย์ นั่นคือคอนเทนเนอร์อย่างน้อยสองคอนเทนเนอร์ และภาชนะทั้งสองนั้นต้องอยู่ในภาชนะที่ใหญ่กว่า

อย่าเพิ่งพยายามจัดรูปแบบอะไร – ทำงานบน HTML และเขียนโค้ดเท่านั้น ดูว่าคุณสามารถบล็อกมันได้หรือไม่ก่อนที่จะดูที่มาร์กอัปด้านล่าง:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

		<html>
	<head>
		<style>
			/*No CSS to display yet*/
</style>
</head>
<body>
	<div class="container" >
	<div class="overlay-outer>
	<img class="item-to-overlay" src="file-here" alt="this-is-our-image" />
<div class="overlay-inner">
	This is our overlay div.
</div> 
</div>
</div>
</body>
</html>

เมื่อเราหาบล็อคหลักได้แล้ว เราก็สามารถจัดสไตล์ได้ ฉันชอบเริ่มต้นจากภายนอก/ภาชนะที่ใหญ่กว่าและทำงานในภาชนะที่เล็กกว่า ช่วยติดตามความกว้างที่แท้จริงของคอนเทนเนอร์ คุณอาจพบว่าคุณต้องการเริ่มต้นจากภายในและพยายามหาทางออก ซึ่งก็ไม่เป็นไรเช่นกัน ติดตามไปพร้อมกับฉันด้านล่าง

ร่างกาย

เริ่มจากภายนอกและเข้าไปข้างใน เรามาที่แท็ก body ก่อน ซึ่งเป็นคอนเทนเนอร์ที่ใหญ่ที่สุดในเพจและถือเพจของเรา คุณสามารถกำหนดสีพื้นหลัง ระยะขอบ และความกว้างและความกว้างสูงสุดของแอปพลิเคชันได้ที่นี่:

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
}
</style>

Div.คอนเทนเนอร์

คอนเทนเนอร์ต่อไปที่เรามาถึงคือ div แรกของเรา อันนี้ค่อนข้างตรงไปตรงมา เราแค่ต้องการให้ความกว้างเป็น 100%

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
margin: 0 auto;
}
div.container {
	width: 100%;
}
</style>

Div.overlay-outer

เมื่อเราดำดิ่งสู่มาร์กอัป <div> . ถัดไป เรามาเป็นที่หนึ่งที่มี class=”overlay-outer” . นี่คือจุดที่เราต้องเริ่มคิดเกี่ยวกับสไตล์ของโอเวอร์เลย์ของเรา

สิ่งแรกที่เราต้องทำคือกำหนดคำจำกัดความสำหรับคอนเทนเนอร์ที่จะใส่รูปภาพและโอเวอร์เลย์ เราต้องการให้คอนเทนเนอร์โอเวอร์เลย์ใช้ความกว้างของหน้าเว็บเท่าใด แล้วส่วนสูงล่ะ? นี่ก็เป็น <div> ที่ซึ่งเราจำเป็นต้องสร้าง "รั้ว" ของเราสำหรับภาพลักษณ์ของเรา ดังนั้นเราต้องเพิ่มคุณสมบัติตำแหน่งให้กับองค์ประกอบ:

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
margin: 0 auto;
}
div.container {
	width: 100%;
}
div.overlay-outer {
	width: 50%;
	height: 400px;
	position: relative;
}
div.
</style>

CSS Overlay รวมหลายสิ่งที่เราได้เรียนรู้จนถึงตอนนี้ใน CSS:การวางตำแหน่ง, สีพื้นหลัง, ความทึบ, ความพอดีของวัตถุและ divs หลังจากจัดสไตล์คอนเทนเนอร์โอเวอร์เลย์ด้านนอกแล้ว เราต้องดูที่รูปภาพและคอนเทนเนอร์โอเวอร์เลย์ด้านใน

ไอจี

อิลิเมนต์รูปภาพต้องตรงกับความกว้างและความสูงของคอนเทนเนอร์ที่ติดตั้งอยู่ นี่ยังเป็นที่สำหรับใส่เส้นขอบหากต้องการ และครอบตัดรูปภาพของคุณ

Div.ทับซ้อนด้านใน

การซ้อนทับภายใน <div> และรูปแบบที่เกี่ยวข้องกับรูปลักษณ์ที่แท้จริงของภาพซ้อนทับ นี่คือที่ที่คุณจะเลือกสีพื้นหลังสำหรับโอเวอร์เลย์ ตั้งค่าความทึบเป็น 0 ที่สำคัญที่สุด เราต้องเพิ่ม position: absolute,  top:  0 and left: 0 เพื่อให้ div ซ้อนทับภายในจะตั้งอยู่บน <div> ที่ถูกตั้งค่าเป็นตำแหน่ง:ญาติ

Div.overlay-inner p

ที่นี่เราจัดรูปแบบเนื้อหาจริงของคอนเทนเนอร์โอเวอร์เลย์

Div.overlay-outer:hover .overlay-inner

สุดท้าย เราจะวาง :hover pseudo-class บนคอนเทนเนอร์โอเวอร์เลย์ภายนอกของเรา เพื่อให้โอเวอร์เลย์แสดงเมื่อเราวางเมาส์เหนือมัน:

.outside:hover .inside {
  opacity: .8;
  transition: opacity .5s;
}

การตั้งค่าความทึบระหว่าง 0 ถึง 1 ช่วยให้สีพื้นหลังที่กำหนดให้กับ div การซ้อนทับด้านในเป็นแบบโปร่งแสง คุณสมบัติการเปลี่ยนแปลงทำให้การเปลี่ยนจากความทึบ 0 เป็นความทึบ 8 เป็นไปอย่างราบรื่น

ตอนนี้คุณสร้างโอเวอร์เลย์ CSS สำเร็จแล้ว ยินดีด้วย!

การใช้ CSS และ HTML เป็นวิธีการหนึ่งในการสร้างโอเวอร์เลย์สำหรับองค์ประกอบ สำหรับโซลูชันนี้ เราใช้คุณสมบัติหลายอย่างจาก CSS เพื่อช่วย:การเปลี่ยนแปลง ตำแหน่ง ความพอดีของวัตถุ ความกว้าง ความสูง และอื่นๆ

ในบทความนี้ เรายังได้เรียนรู้วิธีแก้ไขปัญหา วิธีบล็อก HTML และวิธีการจัดรูปแบบ CSS สำหรับเอฟเฟกต์ภาพซ้อนทับของเรา ในตัวแก้ไขโค้ดด้านล่างเป็นตัวอย่างการทำงานของประเด็นต่างๆ ที่กล่าวถึงในที่นี้:

<html>
<head>
	<style>
			* {
  				box-sizing: border-box;
}

body {
  background: grey;
  max-width: 800px;
  height: 1000px;
}

.outside {
  width: 75%;
  height: 400px;
  display: inline-block;
  position: relative;
  cursor: pointer;

}


.images {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 5px double black;
}

.inside {
  background-color: #9c1203;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  position: absolute;
  padding: 0;
}

.inside p {
  color: #fff;
  line-height: 150px;
  font-family: 'arial';
  padding: 20px;
  text-align: left;
}

.outside:hover .inside {
  opacity: .8;
  transition: opacity .5s;
}
</style>
</head>
<body>
	<div class="container" >
    		<h1>CSS Overlay</h1>
	<div class="overlay-outer>
	<img  class="images" src="https://images.unsplash.com/photo-1548630826-2ec01a41f48f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3367&q=80" /> alt="this-is-our-image" />
<div class="overlay-inner">
	<p>This is an overlay!</p>
</div> 
</div>
</div>
</body>
</html>

ใช้เวลาในการเล่นกับมาร์กอัปเพื่อดูว่าคุณสามารถสร้างโอเวอร์เลย์นี้ในเวอร์ชันของคุณเองได้หรือไม่