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

เป็นไปได้ไหมที่จะใช้ HTML เพื่อตั้งค่าพื้นหลัง?

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

ดังนั้น เราจะใช้ Cascading Style Sheets (CSS) มีโอกาสอีกมากมายในการตั้งค่าพื้นหลัง วันนี้เราจะมาดูสิ่งพื้นฐานที่สุด

วิธีการตั้งค่าพื้นหลังโดยใช้ css?

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

หลังจากที่คุณตัดสินใจเลือกตัวเลือกแล้ว คุณจะต้องเขียนชื่อของคุณสมบัติเอง หากต้องการตั้งค่าสีพื้นหลัง (ได้แก่ สีทึบ ไม่ใช่การไล่ระดับสีหรือรูปภาพ) ให้ใช้คุณสมบัติสีพื้นหลัง หลังจากนั้นคุณจะต้องใส่เครื่องหมายโคลอนแล้วเขียนสีเอง ซึ่งสามารถทำได้หลายวิธี ตัวอย่างเช่น การใช้คำหลัก, รหัสฐานสิบหก, รูปแบบ rgb, rgba, hsl วิธีไหนก็ได้

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

ร่างกาย (สีพื้นหลัง: #D4E6B3; )

ต้องใส่รหัสนี้ในส่วนหัว สิ่งสำคัญคือไฟล์จะต้องอยู่ในโฟลเดอร์เดียวกัน

ภาพเป็นพื้นหลัง

สำหรับรูปภาพ ฉันจะใช้ไอคอนภาษา html เล็กๆ:

มาสร้างบล็อกว่างพร้อมตัวระบุ:

< div id = "bg" > < / div >

ให้มิติและพื้นหลังที่ชัดเจน:

#bg( width: 400px; height: 250px; ภาพพื้นหลัง: url(html.png); )

#บีจี( ความกว้าง: 400px; ความสูง: 250px; พื้นหลัง - รูปภาพ : url (html .png ) ;

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

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

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

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

ทำซ้ำ – ค่าเริ่มต้น รูปภาพจะถูกทำซ้ำทั้งสองด้าน

Repeat-x – ทำซ้ำบนแกน x เท่านั้น;

Repeat-y – ทำซ้ำตามแกน y เท่านั้น

ไม่ทำซ้ำ - ไม่ทำซ้ำเลย

คุณสามารถเขียนแต่ละค่าและดูว่าเกิดอะไรขึ้น ฉันจะเขียนมันแบบนี้:

พื้นหลังซ้ำ: ซ้ำ-x;

พื้นหลัง - ซ้ำ : ซ้ำ - x ;

ตอนนี้ทำซ้ำในแนวนอนเท่านั้น ถ้าตั้งไม่ซ้ำก็จะมีรูปเดียว

เยี่ยมเลย เราขอจบตรงนี้ได้ เนื่องจากนี่คือความสามารถพื้นฐานของการทำงานกับพื้นหลัง แต่ฉันจะแสดงคุณสมบัติเพิ่มเติมอีก 2 รายการให้คุณดูที่ช่วยให้คุณควบคุมได้มากขึ้น

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

ตำแหน่งพื้นหลัง

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

คุณสามารถตั้งค่าได้หลายวิธี ทางเลือกหนึ่งคือเพียงระบุด้านที่ควรวางรูปภาพ:

ตำแหน่งพื้นหลัง: ด้านบนขวา;

พื้นหลัง - ตำแหน่ง : บนขวา ;

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

ตำแหน่งพื้นหลัง: 50% 50%;

ตำแหน่งพื้นหลัง: 50% 50%;

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

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

สัญกรณ์ชวเลข

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

พื้นหลัง: #333 url(bg.jpg) ไม่ทำซ้ำ 50% 50%;

พื้นหลัง: #333 url(bg.jpg) ไม่ทำซ้ำ 50% 50%;

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

การควบคุมขนาดของภาพพื้นหลัง

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

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

ตอนนี้รูปภาพของฉันใช้พื้นที่ทั้งหมดในบล็อก แต่ฉันจะให้ขนาดพื้นหลังเป็น:

ขนาดพื้นหลัง: 80% 50%;

ขนาดพื้นหลัง: 80% 50%;

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

ตามที่คุณสามารถเดาได้ ขนาดพื้นหลังสามารถระบุเป็นพิกเซลได้เช่นกัน มีคำหลักอีกสองคำที่สามารถใช้ได้:

หน้าปก – รูปภาพจะถูกปรับขนาดเพื่อให้ด้านหนึ่งเต็มบล็อกอย่างน้อยที่สุด

บรรจุ – ปรับขนาดเพื่อให้รูปภาพพอดีกับบล็อกในขนาดสูงสุด

ข้อดีของค่าเหล่านี้คือไม่เปลี่ยนสัดส่วนของภาพปล่อยให้เหมือนเดิม

คุณควรเข้าใจด้วยว่าการยืดภาพอาจทำให้คุณภาพลดลงได้ ฉันสามารถยกตัวอย่างจากชีวิตและการฝึกฝนจริงของนักออกแบบเลย์เอาต์ได้ ทุกคนรู้และเข้าใจว่าเมื่อออกแบบเดสก์ท็อปคุณต้องปรับไซต์ให้เข้ากับความกว้างของจอภาพหลัก: 1280, 1366, 1920 หากคุณถ่ายภาพพื้นหลังที่มีขนาดเท่ากับ 1280 x 200 และอย่าให้ไว้ ขนาดพื้นหลังแล้วหน้าจอที่มีความกว้างมากขึ้น พื้นที่ว่างจะปรากฏขึ้น รูปภาพจะไม่เต็มความกว้างทั้งหมด

ในกรณี 99% สิ่งนี้ไม่เหมาะกับนักพัฒนาเว็บ เขาจึงตั้งค่าขนาดพื้นหลัง: cover เพื่อให้รูปภาพขยายจนสุดความกว้างสูงสุดของหน้าต่างเสมอ นี่เป็นเทคนิคที่ดีที่จะใช้ แต่ตอนนี้คุณจะพบกับปัญหาที่ผู้ใช้ที่มีหน้าจอกว้าง 1920 พิกเซลอาจเห็นคุณภาพของภาพที่ไม่ดีนัก

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

โดยทั่วไป นี่เป็นเพียง 1 ตัวอย่างวิธีใช้ความรู้ที่คุณได้รับในบทความนี้เมื่อจัดวางเค้าโครงจริง

พื้นหลังโปร่งแสงโดยใช้ CSS

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

ตามตัวอย่าง ฉันจะตั้งค่าทั้งหน้าเป็นพื้นหลังให้กับรูปภาพที่เราใช้ก่อนหน้านี้ในตัวอย่าง สำหรับบล็อกที่มีตัวระบุ bg ซึ่งเราทำการทดลองทั้งหมด เราจะตั้งค่าพื้นหลังโดยใช้รูปแบบการตั้งค่าสี rgba

อย่างที่ผมบอกไปก่อนหน้านี้ การตั้งค่าสีใน CSS มีหลายรูปแบบ หนึ่งในนั้นคือ rgb ซึ่งเป็นรูปแบบที่รู้จักกันดีสำหรับผู้ที่ทำงานในโปรแกรมแก้ไขกราฟิก มันเขียนแบบนี้: rgb(17, 255, 34);

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

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

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

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

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

หากคุณไม่มีปัญหากับภาษาอังกฤษคุณจะเข้าใจได้โดยไม่ยาก

ในบทความนี้ฉันได้เลือกหัวข้อแล้วและเรียกว่าทวีด คุณสามารถดาวน์โหลดได้

นี่คือสิ่งที่ดูเหมือนในเวอร์ชันขนาดเล็กบนเว็บไซต์

ขั้นแรกให้สร้างเอกสารใหม่ในโปรแกรม

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

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

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

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

ในแท็กชื่อ คุณสามารถเปลี่ยนชื่อเรื่องของเอกสารได้ เช่น ทำให้เป็น "หน้าเว็บแรกของฉัน" และตรวจสอบให้แน่ใจว่าเพจของคุณได้รับการบันทึกในการเข้ารหัส UTF-8

มิฉะนั้น หากมีการเข้ารหัสอื่น เช่น windows-1251 ข้อความของเอกสารในเบราว์เซอร์จะแสดงเป็นอักษรอียิปต์โบราณ คุณสามารถเปลี่ยนการเข้ารหัสได้ในส่วน "การเข้ารหัส – เข้ารหัสใน Utf-8 (ไม่มี BOM)" บนแถบเครื่องมือของโปรแกรม

และอย่าลืมบันทึกทุกการกระทำที่เราทำ

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

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

ในการทำเช่นนี้ ในโปรแกรม Notepad++ ของเรา เราจะสร้างไฟล์อื่นและเรียกว่า Style.css และบันทึกลงในโฟลเดอร์ css ใหม่ ซึ่งจะอยู่ในโฟลเดอร์แชร์ “ไซต์ของฉัน”

ยอดเยี่ยม! เพื่อให้เบราว์เซอร์ของเราแสดงเพจได้อย่างถูกต้อง เราจำเป็นต้องเชื่อมต่อสไตล์ชีตกับเอกสาร html ของเรา นี่คือวิธีการทำ

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

ให้ฉันอธิบายเล็กน้อยที่นี่ แอตทริบิวต์พื้นหลังมีค่าหลายค่า หนึ่งในนั้นคือพื้นหลังซ้ำ ซึ่งทำหน้าที่ขยายภาพพื้นหลังของเราสำหรับเอกสารเว็บ

พื้นหลัง-ทำซ้ำ:

ทำซ้ำ //(ยืดในแนวนอนและแนวตั้ง) REPEAT-X // (ยืดในแนวนอนเท่านั้น) REPEAT-Y //(ยืดแนวตั้งเท่านั้น) NO-REPEAT //(อย่าทำซ้ำภาพพื้นหลัง)

ในกรณีของเรา เราจำลองภาพเล็กๆ ของเราทั้งแนวตั้งและแนวนอน เป็นผลให้ทั้งหน้าเต็มไปด้วยภาพของเรา นี่คือลักษณะที่ปรากฏในเบราว์เซอร์:

ฉันยังได้เลือกไซต์สำหรับคุณโดยเฉพาะซึ่งคุณสามารถดาวน์โหลดพื้นหลังที่สวยงามสำหรับไซต์ได้

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

วิธียืดพื้นหลังให้เต็มความกว้างของหน้าต่าง?

หากต้องการปรับขนาดพื้นหลัง ให้ใช้คุณสมบัติขนาดพื้นหลัง โดยตั้งค่าเป็น 100% จากนั้นพื้นหลังจะกินพื้นที่ความกว้างทั้งหมดของหน้าต่างเบราว์เซอร์ สำหรับเบราว์เซอร์เวอร์ชันเก่า คุณควรใช้คุณสมบัติเฉพาะพร้อมคำนำหน้า ดังแสดงในตัวอย่างที่ 1

จะเพิ่มภาพพื้นหลังให้กับเว็บเพจได้อย่างไร?

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

เป็นไปได้ไหมที่จะสร้างพื้นหลังแบบเคลื่อนไหว?

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

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

วิธีใส่ภาพพื้นหลังที่มุมล่างขวาของหน้า?

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

ฉันจะป้องกันไม่ให้พื้นหลังซ้ำได้อย่างไร

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

ฉันจะทำให้พื้นหลังแสดงซ้ำเฉพาะแนวตั้งได้อย่างไร

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

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

การสร้างพื้นหลังใหม่สำหรับเว็บไซต์

เพื่อให้งานเสร็จสมบูรณ์ คุณสามารถใช้วิธีใดวิธีหนึ่งจาก 4 วิธี:

• 1. พื้นหลังที่มีสีเดียว
• 2. พื้นหลังที่มีพื้นผิว
• 3. พื้นหลังโดยใช้การไล่ระดับสี
• 4. พื้นหลังจากภาพขนาดใหญ่

สร้างพื้นหลังโดยใช้สีเดียว

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

สีพื้นหลัง: #83C5E9 ; (พื้นหลังสีน้ำเงินตามตัวอย่าง)

คุณสามารถดูรายการสีทั้งหมดได้ที่เว็บไซต์ - (STM) หากต้องการเปลี่ยนสี เพียงเปลี่ยนค่าหลังเครื่องหมายโคลอนแล้วเพลิดเพลินไปกับความพยายามของคุณ

การสร้างพื้นหลังโดยใช้พื้นผิว

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

สีพื้นหลัง: #537759;

ภาพพื้นหลัง: url (images/pattern.png);

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

การสร้างพื้นหลังโดยใช้การไล่ระดับสี

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

สีพื้นหลัง: #83C5E9;

ภาพพื้นหลัง: url (images/gradient.jpg);

พื้นหลังซ้ำ: ซ้ำ-x;

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

การใช้รูปภาพขนาดใหญ่เป็นพื้นหลังของเว็บไซต์

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

สีพื้นหลัง: #000000;

ภาพพื้นหลัง: url (images/image title.jpg);

ตำแหน่งพื้นหลัง: ตรงกลางด้านบน;

พื้นหลังซ้ำ: ไม่ซ้ำ;

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

การเปลี่ยนพื้นหลังบนเว็บไซต์ ucoz

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

ตอนนี้คุณต้องเปิด Style Sheet (CSS) ค้นหาบรรทัด "ร่างกาย"และพารามิเตอร์ "พื้นหลัง"- หลังจากนี้คุณจะต้องคัดลอกลิงก์แล้ววางลงในอินเทอร์เน็ตเบราว์เซอร์ของคุณแล้วคุณจะสามารถเข้าถึงรูปภาพที่เป็นพื้นหลังได้

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

การเปลี่ยนพื้นหลังของไซต์เป็น HTML

หากคุณต้องการสร้างพื้นหลังบนไซต์ html โดยใช้รูปภาพ ให้ป้อนบรรทัดในโค้ด:

และหากคุณต้องการสร้างพื้นหลังของไซต์โดยใช้สี เส้นควรมีลักษณะดังนี้:

นี่เป็นการสรุปเรื่องราวของเรา ตอนนี้คุณรู้วิธีสร้างพื้นหลังสำหรับเว็บไซต์แล้ว โครงการสุขสันต์!

วลาด เมอร์เซวิช

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

พื้นหลังบนหน้าเว็บ

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

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

การเพิ่มวอลเปเปอร์

การเพิ่มรูปภาพเกิดขึ้นโดยการตั้งค่าที่อยู่ของรูปภาพโดยใช้คีย์เวิร์ด url ในการควบคุมการทำซ้ำของรูปภาพ จะใช้อาร์กิวเมนต์ no-repeat,ทำซ้ำ-x (ทำซ้ำในแนวนอน) และrepeat-y (ทำซ้ำในแนวตั้ง) ด้วยเหตุนี้ คุณจึงสามารถได้รับหน้าเว็บที่แสดงในรูปที่ 1 1.

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

ตัวอย่างที่ 1: ภาพพื้นหลัง

ในตัวอย่างนี้ กราฟิก target.gif ถูกกำหนดให้เป็นพื้นหลังของหน้าเว็บโดยไม่ต้องแสดงรูปภาพซ้ำ เพื่อป้องกันไม่ให้รูปภาพพอดีกับขอบของเบราว์เซอร์ จึงเลื่อนไปทางขวา 30 พิกเซลและเลื่อนลงจากตำแหน่งเดิม 20 พิกเซล

การทำซ้ำรูปแบบ

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

การออกแบบจะต้องพอดีกันในแนวตั้งโดยไม่มีตะเข็บที่เห็นได้ชัดเจน และยังรวมเป็นหนึ่งเดียวด้วยสีพื้นหลังที่ระบุของหน้าเว็บ

ตัวอย่างที่ 2 แสดงวิธีการสร้างภาพพื้นหลังดังกล่าวอีกครั้งโดยใช้คุณสมบัติพื้นหลังและค่าซ้ำ-y

ตัวอย่างที่ 2 การทำซ้ำพื้นหลังในแนวตั้ง

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

เพื่อให้ได้หน้าเว็บดังรูป 4 คุณจะต้องสร้างรูปภาพที่มีการไล่ระดับสีก่อน ความกว้างเพียงพอที่จะระบุได้ 20-40 พิกเซล และความสูงของภาพขึ้นอยู่กับวัตถุประสงค์ของเอกสารและความสูงที่คาดหวังของเนื้อหาของหน้าเว็บ อย่าลืมว่าภาพวาดขนาดใหญ่จะเพิ่มขนาดของไฟล์กราฟิก และสิ่งนี้จะส่งผลเสียต่อความเร็วในการโหลดและท้ายที่สุดจะทำให้การแสดงพื้นหลังช้าลง ในกรณีนี้รูปภาพขนาด 30x200 พิกเซลค่อนข้างเหมาะสม (รูปที่ 5)

ตัวอย่างที่ 3 แสดงโค้ด HTML เพื่อสร้างพื้นหลังแบบไล่ระดับสี

ลอเรม อิปซัม...

การออกแบบไล่ระดับสีเข้ากันได้ดีกับบล็อกสีเดียว ดังนั้นในตัวอย่างนี้ เราจึงเพิ่มเลเยอร์เพื่อแสดงเนื้อหาของหน้าเว็บ

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

ตัวอย่างที่ 4: การเพิ่มรูปภาพ

หัวเรื่อง

ข้อความหลัก

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