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

#bg ( ตำแหน่ง:คงที่; บน:-50%; ซ้าย:-50%; ความกว้าง:200%; ความสูง:200%; ) #bg img ( ตำแหน่ง:สัมบูรณ์; บน:0; ซ้าย:0; ขวา:0; ด้านล่าง:0; ระยะขอบ:อัตโนมัติ; ความกว้างขั้นต่ำ:50%;

ทำงานใน:

Safari / Chrome / Firefox (ไม่ได้ทดสอบกับทุกเวอร์ชัน แต่ทำงานได้ดีในเวอร์ชันล่าสุด)

ไออี 8+

Opera (เวอร์ชันใดก็ได้) และ IE ปฏิเสธที่จะใช้วิธีนี้ (การวางตำแหน่งรูปภาพไม่ถูกต้อง)

การใช้ jQuery

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

#bg ( ตำแหน่ง: คงที่; บน: 0; ซ้าย: 0; ) .bgwidth ( กว้าง: 100%; ) .bgheight ( สูง: 100%; )

$(function() ( var theWindow = $(window), $bg = $("#bg"),spectRatio = $bg.width() / $bg.height(); function resizeBg() ( if ((theWindow .width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

ทำงานใน:

IE7+ (แบบมีสตับ อาจจะใช้งานได้ใน IE6)

ในเบราว์เซอร์อื่นๆ ทั้งหมด

บทสรุป

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

สวัสดีทุกคน! คนรับใช้ผู้ต่ำต้อยของคุณจะติดต่อกับคุณพร้อมเนื้อหาบางส่วนที่เป็นประโยชน์และใช้งานได้จริงในหัวข้อวิธีตั้งค่าพื้นหลังสำหรับเว็บไซต์ นี่คือจุดเริ่มต้นในเค้าโครง 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 //(อย่าทำซ้ำภาพพื้นหลัง)

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

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

จากผู้เขียน:สวัสดีทุกคน. สีและรูปภาพพื้นหลังมีบทบาทสำคัญในการออกแบบเว็บ เนื่องจากช่วยให้คุณออกแบบองค์ประกอบต่างๆ ได้น่าดึงดูดยิ่งขึ้น วันนี้เราจะมาดูวิธีสร้างพื้นหลังใน 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 ไม่ได้ระบุพื้นหลังสำหรับไซต์ สิ่งนี้เขียนโดยใช้สไตล์ CSS แต่นี่เป็นเพียงรูปแบบทางทฤษฎีเท่านั้น ตอนนี้เรามาดูวิธีกำหนดพื้นหลังนี้กันดีกว่า

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

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

ร่างกาย(
สีพื้นหลัง: สีขาว;
}

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

ร่างกาย(
ภาพพื้นหลัง: url (เส้นทางไปยังส่วนขยาย image.image)
}

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

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

และนี่คือสไตล์ของมัน:

#กะรัต(
ภาพพื้นหลัง: url(comp.png);
ความกว้าง: 600px;
ความสูง: 400px;
}

นี่คือสิ่งที่เราได้รับ:

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

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

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

• Repeat-x – ทำซ้ำในแนวนอนเท่านั้น
• ซ้ำ-y – แนวตั้งเท่านั้น

มาเพิ่มคุณสมบัติของพื้นหลังกราฟิกของเรากันดีกว่า:

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

ตำแหน่ง

คุณสมบัติตำแหน่งพื้นหลังกำหนดตำแหน่งที่จะวางภาพ ระบุค่าสองค่าที่นี่ - แนวนอนและแนวตั้ง ตัวอย่าง: ตำแหน่งพื้นหลัง: ด้านล่างขวา – ตำแหน่งที่มุมขวาล่าง, ซ้ายบน – ที่มุมบนล่าง (และตามค่าเริ่มต้น) 250px 500px – ชดเชยจากมุมซ้ายบนไปทางขวา 250 พิกเซลและลดลงตาม 500.

มาดูตัวอย่างกันดีกว่า:

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

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

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

รูปภาพปรากฏอยู่ตรงกลางบล็อกพอดี ใช่ ใช่ สิ่งนี้เป็นไปได้ด้วยการบันทึกเปอร์เซ็นต์ของตำแหน่ง

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

พื้นหลังถูกเลื่อน 70% ในแนวนอนและ 20% ในแนวตั้ง

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

ล็อคพื้นหลัง

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

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

ฉบับย่อของความดีทั้งหมดนี้

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

พื้นหลัง: URL สีเหลือง (comp.png) ไม่ซ้ำ 20% 100px;

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

ภูมิหลังมากมาย

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

ฉันเรียกมันว่าแล็ปท็อป

และนี่คือรหัสสำหรับใส่มัลติโฟน:

พื้นหลัง: url(comp.png) ไม่ซ้ำ 20% 100px,
url (laptop.png) ไม่ทำซ้ำ 50% 50%;
สีพื้นหลัง: สีเหลือง;

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

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

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