ลบพื้นหลังใน HTML: ขั้นตอนที่ง่ายและสะดวก
มีช่วงเวลาบางครั้งที่คุณอาจต้องการตั้งพื้นหลังของหน้าเว็บหรือแก้ไของค์ประกอบเพื่อทำให้ดูน่าสวยยิ่งขึ้นหรือเน้นบางสิ่งเฉพาะ ฯลฯ แต่การทำเช่นนั้นโดยใช้ HTML ไม่ใช่เรื่องที่ทุกคนสามารถทำได้โดยง่าย ดังนั้นนี่คือคู่มือของคุณเพื่อลบภาพพื้นหลังใน HTML อย่างง่ายดาย!
วิธีการลบภาพพื้นหลังใน HTML?
นี่คือขั้นตอนที่คุณต้องทำเพื่อลบภาพพื้นหลังใน HTML:
ขั้นตอนที่ 1: สร้าง HTML โดยใช้ <h2> และ <div> ทั้งหมดสามตัว และสำหรับ <div> ที่สอง ให้ใช้ "id" ที่อ่านว่า "no-background."
<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>
ขั้นตอนที่ 2: เพิ่ม CSS โดยเริ่มต้นด้วยการเพิ่มสไตล์ที่ <div> ตั้งแต่เริ่มต้นถึง <div> สุดท้าย
เพิ่มความสูงและความกว้างของ <div> แล้วระบุ margin-bottom, คุณสมบัติของเส้นและสีพื้นหลัง
และหลังจากนั้นใช้คุณสมบัติ background-image พร้อมค่า "url" หลังจากนี้กำหนดการทำซ้ำพื้นหลังเป็น "no-repeat" แล้วเสร็จสิ้นด้วยการเพิ่ม background-size
นี่คือวิธีที่อาจดูเป็น:
div {
height: 170px;
width: 300px;
margin-bottom: 20px;
background-color: #CDCDCD;
border: 2px solid #CDCDCD;
background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-size: 100%;
}
ขั้นตอนที่ 3: ในท้ายที่สุด จัดรูปแบบ <div> ที่มี "id" ชื่อ "no-background" และลบพื้นหลังของ <div> และกำหนดคุณสมบัติ background-image เป็น "none."
div#no-background {
background-image: none;
}
รหัสทั้งหมดของคุณอาจมีลักษณะดังนี้:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 170px;
width: 300px;
margin-bottom: 20px;
background-color: #CDCDCD;
border: 2px solid #CDCDCD;
background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-size: 100%;
}
div#no-background {
background-image: none;
}
</style>
</head>
<body>
<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>
</body>
</html>
ด้วยขั้นตอนนี้ พื้นหลังจากรูปของคุณถูกลบอย่างสำเร็จ!
นำพื้นหลังออกจาก PNG, JPG, JPEG และ WebP ด้วย Erase.bg:
Erase.bg เป็นเครื่องมือแก้ไขและลบพื้นหลังด้วยปัญญาประดิษฐ์ที่ชาญฉลาดที่ช่วยแก้ไขภาพของคุณอย่างแม่นยำ ด้วย Erase.bg ทุกคนสามารถลบพื้นหลังจากรูปได้อย่างง่ายดาย ไม่ว่าจะมีทักษะทางเทคนิคเท่าใด คุณสามารถใช้ Erase.bg เพื่อลบพื้นหลังจากรูปประเภท PNG, JPG, JPEG และ WebP ได้
สำหรับการลบพื้นหลังจากไฟล์เหล่านี้ คุณต้องเข้าถึง Erase.bg ผ่านเว็บไซต์หรือดาวน์โหลดแอปพลิเคชัน Erase.bg จาก App Store (สำหรับผู้ใช้ iOS) หรือ Google Play Store (สำหรับผู้ใช้ Android)
คุณสามารถลบพื้นหลังจาก WebP, PNG, JPG และ JPEG ได้อย่างง่ายดายโดยใช้ Erase.bg:
ขั้นตอนที่ 1: คลิกที่กล่องโต้ตอบที่อ่าน "อัปโหลดรูปภาพ" หรือคุณยังสามารถลากรูปลงบนหน้าเว็บได้
ขั้นตอนที่ 2: จะปรากฏข้อความบนหน้าจอที่บอกว่า "กำลังอัปโหลดรูปภาพ โปรดรอ..." และในขณะนี้ ปัญญาประดิษฐ์ของ Erase.bg จะทำเวทมนตร์เพื่อลบพื้นหลังจากรูปที่คุณเลือก
ขั้นตอนที่ 3: หากคุณต้องการลบบางสิ่งหรือแก้ไขรูป คุณจะเห็นตัวเลือกแก้ไขที่มุมขวาบนของรูปที่ลบพื้นหลัง
ขั้นตอนที่ 4: ดาวน์โหลดรูปที่แก้ไขลงในอุปกรณ์ของคุณโดยไม่มีพื้นหลัง
Remove Background From
FAQ
Here, we have listed some of the commonly asked questions from the community. If you do not find the information you need, feel free to reach out to us at support@pixelbin.io
เพื่อเพิ่มสีพื้นหลังใน HTML นี้คือที่คุณต้องทำ:
PS: ในตัวอย่างนี้เราจะเปลี่ยนสีพื้นหลังของตาราง.
ขั้นตอนที่ 1: สแกนโค้ด HTML เพื่อทราบว่าคุณต้องการแก้ไของค์ประกอบใด หากเป็นหัวกระดาษ ค้นหาแท็กเปิด <header> และหากเป็น div ค้นหาแท็ก <div>.
ขั้นตอนที่ 2: ตอนนี้เลือกสีจากหลายสีที่มีให้เลือก ในที่นี้เราจะเลือก #33475b.
ขั้นตอนที่ 3: หลังจากนั้นเพิ่มแอตทริบิวต์สไตล์ที่แท็กเปิด. ดังนั้น นี่คือรหัส HTML ของคุณจะมีลักษณะอย่างไร:
<table style="background-color:#33475b">
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>
เพื่อตั้งค่าสีพื้นหลังใน HTML คุณต้องใช้แอตทริบิวต์สไตล์และมันระบุสไตล์อินไลน์ขององค์ประกอบ.
แอตทริบิวต์สไตล์มักใช้กับแท็ก HTML <body> พร้อมกับคุณสมบัติ CSS background-color. นั่นเพราะ HTML5 ไม่รองรับแอตทริบิวต์ bgcolor ของแท็ก <body>.
ดังนั้น นี่คือรหัสของคุณที่อาจมีลักษณะอย่างไร:
<!DOCTYPE html>
<html>
<head></head>
<bodystyle=“background-color:add_color”>
…
</body>
</html>
HTML สำหรับโปร่งใสคือ FFFFFF หรือ 00FFFFFF.
นอกจากนี้ คุณยังสามารถใช้คำสำคัญ "transparent" เพื่อกำหนดคุณสมบัติ CSS ที่ไม่ต้องการสีทึบ.
rgba() และ hsla() มีพารามิเตอร์ที่สี่ (ในช่วง 0;1) เพื่อกำหนดช่องอัลฟาของสี.
ไม่เพียงเท่านั้น แต่ยังสามารถให้ค่าอัลฟาที่สี่ผ่านทางตัวกำหนดสี 32 บิต แทนที่จะใช้สีทั่วไป 24 บิต.
และสุดท้าย คุณยังสามารถใช้คุณสมบัติ CSS 'opacity' (ในช่วง 0;1) เพื่อกำหนดระดับความโปร่งใสให้กับองค์ประกอบ.
ไม่, HTML เพียงลำพังไม่สามารถลบพื้นหลังจากรูปได้. คุณต้องใช้เครื่องมือแก้ไขรูปหรือตัวลบพื้นหลังด้วยปัญญาประดิษฐ์ (Erase.bg) เพื่อทำนี้.
ไม่, CSS เพียงลำพังไม่สามารถลบพื้นหลังจากรูปได้. อย่างไรก็ตาม, คุณสามารถใช้ CSS เพื่อปรับรูปแบบของภาพพื้นหลัง เช่น การปรับความโปร่งใสหรือการเพิ่มเอฟเฟกต์ฟิลเตอร์.
แท็ก HTML สำหรับภาพพื้นหลังคือ "ภาพพื้นหลัง" เป็นคุณสมบัติ CSS ที่กำหนดภาพพื้นหลังสำหรับองค์ประกอบ HTML
Recent Blogs
.webp)
Why Erase.BG
.webp){kind=icon}
.png){kind=icon}
.png){kind=icon}
.png){kind=icon}
.webp){kind=icon}
.webp){kind=icon}
