ปรับสีพื้นหลังใน HTML

ผู้เขียน: Judy Howell
วันที่สร้าง: 5 กรกฎาคม 2021
วันที่อัปเดต: 1 กรกฎาคม 2024
Anonim
ภาษา HTML คำสั่งใส่สีพื้นหลัง,ใส่ภาพพื้นหลังเว็บไซต์
วิดีโอ: ภาษา HTML คำสั่งใส่สีพื้นหลัง,ใส่ภาพพื้นหลังเว็บไซต์

เนื้อหา

เพื่อให้สามารถตั้งค่าพื้นหลังของหน้าเว็บใน HTML ได้คุณเพียงแค่ทำการเปลี่ยนแปลงเล็กน้อยกับองค์ประกอบ "body" ภายใน style> / style> แท็ก ขั้นตอนต่างๆขึ้นอยู่กับว่าคุณต้องการให้วอลเปเปอร์ออกมาเป็นอย่างไร เรียนรู้วิธีตั้งค่าพื้นหลังของเว็บไซต์ของคุณเป็นภาพเคลื่อนไหวสีทึบภาพไล่ระดับสีหรือสี

ที่จะก้าว

วิธีที่ 1 จาก 4: การตั้งค่าสีพื้นหลังทึบ

  1. เปิดไฟล์ HTML ของคุณในโปรแกรมแก้ไขข้อความที่คุณชื่นชอบ สำหรับ HTML5 แอตทริบิวต์ HTML bgcolor> ไม่ได้รับการสนับสนุนอีกต่อไป ต้องตั้งค่าสีพื้นหลังเช่นเดียวกับลักษณะรูปแบบอื่น ๆ ของเพจด้วย CSS
  2. เพิ่มไฟล์ style> / style> แท็กเอกสารของคุณ ข้อมูลรูปแบบทั้งหมดสำหรับเพจของคุณ (รวมถึงสีพื้นหลัง) ควรเข้ารหัสภายในแท็กเหล่านี้ คุณมีไฟล์ สไตล์> ระบุแท็กแล้วคุณสามารถเลื่อนไปที่ส่วนนั้นของไฟล์ได้

    ! DOCTYPE html> html> head> style> / style> / head> / html>

  3. พิมพ์องค์ประกอบ "body" ภายในไฟล์ style> / style> แท็ก ทุกสิ่งที่คุณเปลี่ยนเป็นองค์ประกอบ "body" ใน CSS จะส่งผลต่อทั้งหน้า

    ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

  4. เพิ่มคุณสมบัติ "background-color" ให้กับองค์ประกอบ "body" ในบริบทนี้การสะกด "color" เพียงคำเดียวเท่านั้นที่จะใช้ได้ (ไม่ใช่: color)

    ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

  5. วางสีพื้นหลังที่ต้องการไว้ด้านหลัง "background-color" ตอนนี้คุณสามารถระบุชื่อสี (สีเขียว, สีน้ำเงิน, เอ็ดฯลฯ ) ใช้รหัสฐานสิบหก (ฐานสิบหก) (เช่น #000000 สำหรับสีดำ # ff0000 สำหรับสีแดง ฯลฯ ) หรือโดยการพิมพ์ค่า RGB สำหรับสี (เช่น rgb (255,255,0) สำหรับสีเหลือง) ด้านล่างนี้เป็นตัวอย่างที่มีรหัสฐานสิบหกทำให้พื้นหลังเหมือนกับแบนเนอร์ wikiHow:

    ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

    • ขาว: #FFFFFF
    • ชมพูอ่อน: # FFCCE6
    • เผาเซียนน่า: #993300
    • คราม - # 4B0082
    • ไวโอเล็ต - # EE82EE
    • ตรวจสอบ w3schools.com HTML Color Picker เพื่อค้นหารหัสฐานสิบหกของสีที่คุณต้องการ
  6. ใช้ "background-color" เพื่อใช้สีพื้นหลังกับองค์ประกอบอื่น ๆ เช่นเดียวกับที่คุณตั้งค่าองค์ประกอบของร่างกายคุณสามารถใช้สีพื้นหลังเพื่อตั้งค่าพื้นหลังขององค์ประกอบอื่น ๆ เพียงวางองค์ประกอบเหล่านั้นไว้ในไฟล์ style> / style> ด้วยคุณสมบัติสีพื้นหลัง

    ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {background-color: orange; } p {สีพื้นหลัง: rgb (255,0,0); } / style> / head> body> h1> ส่วนหัวนี้จะได้พื้นหลังสีส้ม / h1> p> ย่อหน้านี้มีพื้นหลังเป็นสีแดง / p> / body> / html>

วิธีที่ 2 จาก 4: ใช้รูปภาพเป็นพื้นหลัง

  1. เปิดไฟล์ HTML ในโปรแกรมแก้ไขข้อความ หลายคนชอบใช้รูปภาพเป็นพื้นหลังสำหรับเว็บไซต์ของตน ด้วยวิธีนี้คุณสามารถตั้งค่ารูปแบบพื้นผิวภาพถ่ายหรือภาพอื่น ๆ เป็นพื้นหลังได้ จาก HTML5 พื้นหลังทั้งหมดต้องตั้งค่าด้วย CSS (Cascading Style Sheets) ภายในไฟล์ style> / style> แท็ก
  2. เพิ่มไฟล์ style> / style> แท็กไปยังไฟล์ HTML ของคุณ ข้อมูลรูปแบบทั้งหมดสำหรับเพจของคุณ (รวมถึงสีพื้นหลัง) ควรระบุไว้ในแท็กเหล่านี้ คุณมีแล้ว สไตล์> ตั้งค่าแท็กเลื่อนไปที่ส่วนนั้นของไฟล์

    ! DOCTYPE html> html> head> style> / style> / head> / html>

  3. พิมพ์องค์ประกอบ "body" ภายในไฟล์ style> / style> แท็ก ทุกสิ่งที่คุณเปลี่ยนเป็นองค์ประกอบ "body" ใน CSS จะส่งผลต่อทั้งหน้า

    ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

  4. เพิ่มคุณสมบัติ "background-image" ให้กับองค์ประกอบ "body" เมื่อเพิ่มคุณสมบัตินี้คุณจะต้องมีชื่อไฟล์ของรูปภาพของคุณ ตรวจสอบให้แน่ใจว่าภาพถูกบันทึกไว้ในโฟลเดอร์เดียวกับไฟล์ html (หรือเพิ่มเส้นทางแบบเต็มไปยังไฟล์ไปยังเว็บเซิร์ฟเวอร์ของคุณ)

    ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); สีพื้นหลัง: # 93B874; } / style> / head> body> / body> / html>

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

    ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); สีพื้นหลัง: # 93B874; } / style> / head> body> / body> / html>

    • รูปแรกอยู่ด้านบน ภาพที่สองอยู่ด้านล่างภาพแรก

วิธีที่ 3 จาก 4: สร้างพื้นหลังไล่ระดับสี

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

    พื้นหลัง: linear-gradient (ทิศทาง / มุม, color1, color2, color3 ฯลฯ );

  3. สร้างการไล่ระดับสีแนวตั้ง หากคุณไม่ระบุทิศทางสีจะวิ่งจากบนลงล่าง เบราว์เซอร์ที่แตกต่างกันมีฟังก์ชันการไล่ระดับสีที่แตกต่างกันดังนั้นคุณจะต้องเพิ่มรหัสเวอร์ชันต่างๆ

    ! DOCTYPE html> html> head> style> html {min-height: 100%; / * สิ่งนี้จำเป็นเพื่อให้แน่ใจว่าการไล่ระดับสีครอบคลุมเนื้อหา * /} ทั้งหน้า {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: linear-gradient (# 93B874, # C9DCB9); / * ไวยากรณ์เริ่มต้น (ต้องเป็นค่าสุดท้าย) * / background-color: # 93B874; / * ควรตั้งค่าสีพื้นหลังในกรณีที่การไล่ระดับสีไม่โหลด * /} / style> / head> body> / body> / html>

  4. สร้างการไล่ระดับสีพร้อมทิศทาง การเพิ่มทิศทางให้กับการไล่ระดับสีช่วยให้คุณปรับวิธีการเปลี่ยนสีได้ โปรดทราบว่าเบราว์เซอร์ที่แตกต่างกันจะตีความทิศทางต่างกัน พวกเขาทั้งหมดจะแสดงการไล่ระดับสีเดียวกัน

    ! DOCTYPE html> html> head> style> html {min-height: 100%; } body {background: -webkit-linear-gradient (ซ้าย, # 93B874, # C9DCB9); / * จากซ้ายไปขวา * / background: -o-linear-gradient (ขวา, # 93B874, # C9DCB9); / * สิ้นสุดทางด้านขวา * / background: -moz-linear-gradient (ขวา, # 93B874, # C9DCB9); / * สิ้นสุดทางด้านขวา * / background: linear-gradient (ไปทางขวา, # 93B874, # C9DCB9); / * ย้ายไปทางด้านขวา * / background-color: # 93B874; / * ควรตั้งค่าสีพื้นหลังในกรณีที่การไล่ระดับสีไม่โหลด * /} / style> / head> body> / body> / html>

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

      พื้นหลัง: linear-gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

    • เพิ่มความโปร่งใสให้กับสี ด้วยวิธีนี้คุณสามารถทำให้สีจางลงได้ ใช้สีเดียวกันให้จางลงจากสีไม่เหลือเลย คุณจะหลงรักฟังก์ชั่น rgba () ต้องใช้เพื่อระบุสี ค่าสุดท้ายกำหนดระดับความโปร่งใส: 0 สำหรับทึบแสงและ 1 เพื่อความโปร่งใส

      พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, rgba (147,184,116.0), rgba (147,184,116.1));

วิธีที่ 4 จาก 4: ตั้งค่าภาพเคลื่อนไหวสีเป็นภาพพื้นหลัง

  1. นำทางไปยัง สไตล์> ในโค้ด HTML ของคุณ หากคุณพบสีพื้นหลังทึบ แต่ไม่เป็นเช่นนั้นให้ทดลองเปลี่ยนสีพื้นหลัง จาก HTML 5 ต้องกำหนดสีพื้นหลังด้วย CSS (Cascading Style Sheets) หากคุณไม่เคยกำหนดสีพื้นหลังด้วย CSS ให้อ่านหัวข้อเกี่ยวกับการตั้งค่าสีพื้นหลังแบบทึบก่อนที่จะลองใช้วิธีนี้
  2. เพิ่มคุณสมบัติ ภาพเคลื่อนไหว ไปยังองค์ประกอบ "body" คุณจะต้องเพิ่มคุณสมบัติที่แตกต่างกัน 2 รายการเนื่องจากแต่ละเบราว์เซอร์ต้องใช้รหัสที่แตกต่างกัน

    ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; แอนิเมชั่น: colorchange 60s infinite; } / style> / head> body> / body> / html>

    • -webkit- ภาพเคลื่อนไหว คุณสมบัตินี้จำเป็นสำหรับเบราว์เซอร์ที่ใช้ Chrome (Chrome, Opera, Safari) ภาพเคลื่อนไหว เป็นมาตรฐานสำหรับเบราว์เซอร์อื่น ๆ ทั้งหมด
    • เปลี่ยนสี คือสิ่งที่เรียกว่าภาพเคลื่อนไหวในตัวอย่างนี้
    • ยุค 60 คือระยะเวลา (60 วินาที) ของภาพเคลื่อนไหว / การเปลี่ยนแปลง ตรวจสอบให้แน่ใจว่าได้ตั้งค่านี้สำหรับทั้ง webkit และไวยากรณ์เริ่มต้น
    • ไม่มีที่สิ้นสุด แสดงว่าภาพเคลื่อนไหวควรเล่นซ้ำไปเรื่อย ๆ หากคุณต้องการวนสีแล้วหยุดที่สีสุดท้ายคุณสามารถละเว้นส่วนนี้ได้
  3. เพิ่มสีสันให้กับแอนิเมชั่นของคุณ ตอนนี้คุณจะใช้กฎ @keyframes เพื่อตั้งค่าสีพื้นหลังรวมถึงระยะเวลาที่แต่ละสีสามารถมองเห็นได้บนหน้า อีกครั้งคุณจะต้องเพิ่มการเข้ารหัสหลายรายการสำหรับเบราว์เซอร์ต่างๆ

    ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; แอนิเมชั่น: colorchange 60s infinite; } @ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

    • โปรดสังเกตว่าสองบรรทัด (@ -webkit- คีย์เฟรม และ @keyframes มีค่าสีพื้นหลังและเปอร์เซ็นต์เท่ากัน ควรมีความสม่ำเสมอเพื่อให้ประสบการณ์การใช้งานยังคงเหมือนเดิมสำหรับทุกเบราว์เซอร์
    • เปอร์เซ็นต์ (0%, 25%ฯลฯ ) แสดงระยะเวลาทั้งหมดของแอนิเมชั่น (ยุค 60). เมื่อหน้าเว็บโหลดพื้นหลังจะมีการตั้งค่าสีเป็น 0% และ (# 33FFF3). เมื่อภาพเคลื่อนไหวเล่นไปแล้ว 25% หรือ 60 วินาทีพื้นหลังจะเปลี่ยนเป็น # 78281Fและอื่น ๆ
    • คุณสามารถปรับระยะเวลาและสีได้ตามต้องการ

บทความใหม่

วิธีกลับใจ
วิธีกลับใจ
วิธีการต่อรองราคา
วิธีการต่อรองราคา
วิธีเตือนตัวเองว่าคุณมีความสำคัญ
วิธีเตือนตัวเองว่าคุณมีความสำคัญ
วิธีจดจำเพื่อนที่อิจฉาคุณ
วิธีจดจำเพื่อนที่อิจฉาคุณ