Lv.19 CSS Backgrounds

Posted on by alsoon

CSS Backgrounds เป็นการเพิ่มภาพพื้นหลังให้กับอิลิเมนต์ต่างๆ

CSS Backgrounds Color

กำหนดสีให้พื้นหลังอิลิเมนต์ต่างๆ โดยใช้ background-color ค่าสีที่สามารถใช้ได้ดูได้ ที่นี่

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Backgrounds</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			h1 {
				padding: 10px;
				text-align: center;
				background-color: red;
			}
			
			p {
				padding: 15px;
				background-color: blue;
			}
			
			div {
				height: 500px;
				background: green;
			}
		</style>
	</head>
	<body>
	
		<h1>หัวเรื่อง H1</h1>
		<div>
			<p>พารากราฟ</p>
		</div>
		
	</body>
</html>

CSS Opacity และ Transparency

Opacity และ Transparency ค่าความทึบและโปร่งใสของอิลิเมนต์ สามารถปรับค่าได้ตั้งแต่ 0.0 – 1.0 ค่ายิ่งต่ำยิ่งโปร่งใส

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Backgrounds</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			div {
				height: 500px;
				padding: 10px;
				background: green;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
	
		<div>
			<h1>หัวเรื่อง H1</h1>
			<p>พารากราฟ</p>
		</div>
		
	</body>
</html>

CSS Background Image

ใช้รูปภาพเป็นพื้นของอิลิเมนต์ต่างๆ โดยใช้ background-image

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Backgrounds</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			body {
				background-image: url("bg.png");
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

CSS Background Image Repeat

ค่า property เริ่มต้นของ background-image จะทำซ้ำรูปภาพทั้งในแนวนอนและแนวตั้ง บางรูปดูดีในแนวนอน บางรูปดูดีในแนวตั้ง

รูปที่ต้องการให้เรียงกันแนวนอนใช้ background-repeat: repeat-x หากต้องการรูปเรียงกันในแนวตั้งให้ใช้ background-repeat: repeat-x หรือถ้าหากต้องการแสดงเพียงภาพเดียวไม่ต้องการให้เรียงเลย ใช้ background-repeat: no-repeat

ตัวอย่างใช้ background-repeat: repeat-x

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Backgrounds</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			body {
				background-image: url("bg.jpg");
				background-repeat: repeat-x;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

ตัวอย่างใช้ background-repeat: repeat-y

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Backgrounds</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			body {
				background-image: url("bg.jpg");
				background-repeat: repeat-y;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

ตัวอย่างใช้ background-repeat: no-repeat

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Backgrounds</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			body {
				background-image: url("bg.jpg");
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

CSS Background Position

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

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Backgrounds</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			body {
				background-image: url("smile.png");
				background-repeat: no-repeat;
				background-position: right top;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Top