วิธียืดพื้นหลังให้เต็มความกว้างของหน้าต่าง? ยืดพื้นหลังให้เต็มความกว้างโดยใช้ CSS ยืดรูปภาพไปยัง CSS บล็อกทั้งหมด

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

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

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

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

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

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

html ( พื้นหลัง: url (รูปภาพ/bg.jpg) ไม่ทำซ้ำจุดกึ่งกลางตรงกลาง -webkit-พื้นหลังขนาด: ปก; -moz-พื้นหลังขนาด: ปก; -o-พื้นหลังขนาด: ปก; ขนาดพื้นหลัง: ปิดบัง)

โซลูชันนี้รองรับโดยโซลูชันยอดนิยมเกือบทั้งหมดบนเครือข่าย:

• Firefox 3.6+ (Firefox 4 รองรับเวอร์ชันนำหน้าที่ไม่ใช่ผู้ขาย)
• Opera 10+ (Opera 9.5 รองรับขนาดพื้นหลัง แต่ไม่มีค่าปก)
• Chrome อะไรก็ได้+
• ไออี 9+
• ซาฟารี 3+

Goltzman คนหนึ่งพบวิธีแก้ปัญหาที่ช่วยให้แฮ็กทำงานใน IE ได้

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")" ;

ตัวกรอง: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale""); แต่ใส่ใจ!!! นี่อาจทำให้เกิดปัญหากับลิงก์บนเพจได้ อย่างไรก็ตาม หลังจากนั้นไม่นาน Matt Litherland ก็เสริมว่า โดยหลักการแล้วโค้ดสามารถใช้ได้แต่ไม่สามารถใช้กับสิ่งนี้ได้องค์ประกอบ HTML

แฮ็ค CSS หมายเลข 1 เวอร์ชันทางเลือกนำเสนอโดย Doug Neiner ในกรณีนี้ จะใช้องค์ประกอบที่ฝังอยู่ในเพจ

img.bg ( /* ตั้งกฎการเติมพื้นหลัง */ min-height : 100% ; min-width : 1024px ; /* ตั้งค่าสัดส่วนสัดส่วน */ width : 100% ; height : auto ; /* ตั้งค่าตำแหน่ง */ ตำแหน่ง : แก้ไข ; top : 0 ; left : 0 ; ) @media screen และ (max-width : 1024px ) ( /* เฉพาะภาพนี้ */ img.bg ( left : 50% ; margin-left : -512px ; /* 50% */ ) )

img.bg ( /* ตั้งกฎให้เติมพื้นหลัง */ min-height: 100%; min-width: 1024px; /* ตั้งค่าสัดส่วนสัดส่วน */ ความกว้าง: 100%; ความสูง: auto; /* ตั้งค่าตำแหน่ง */ ตำแหน่ง: คงที่ด้านบน: 0; ซ้าย: 0; ) @media หน้าจอและ (ความกว้างสูงสุด: 1024px) ( /* เฉพาะภาพนี้ */ img.bg ( ซ้าย: 50%; ขอบซ้าย: -512px; / * 50% */ ) )

• ใช้งานได้กับเบราว์เซอร์คุณภาพสูงทุกเวอร์ชัน - Safari / Opera / Firefox และ Chrome เช่นเคย IE มีความแตกต่างของตัวเอง:
• IE 9 - ใช้งานได้;
• IE 7/8 - ส่วนใหญ่มักจะทำงานได้อย่างถูกต้อง แต่ไม่จัดรูปภาพให้เล็กกว่าหน้าต่างเบราว์เซอร์

ตัวเลือกแฮ็ค CSS 2 อีกทางเลือกหนึ่งในการแก้ปัญหาการใช้งานสไตล์ CSS

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

แฮ็คใช้งานได้ใน:

• Safari / Chrome / Firefox (เวอร์ชันก่อนหน้าไม่ได้ทดสอบ แต่ทำงานได้ดีในเวอร์ชันล่าสุด)
• ไออี 8+
• Opera (เวอร์ชันใดก็ได้) และเมื่อใช้ร่วมกับ IE ทั้งคู่จะมีปัญหาในลักษณะเดียวกันโดยมีข้อผิดพลาดในการกำหนดตำแหน่ง

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

ข้อมูลทั้งหมดเข้าถึงได้ผ่าน JavaScript รหัสที่ใช้มีดังนี้:

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

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

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

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

สวัสดี. ในบทความนี้ ฉันต้องการแบ่งปันสามวิธีในการวางรูปภาพเป็นพื้นหลังของทั้งหน้าโดยใช้เพียง HTML + CSS (ไม่มี JS)

ดังนั้นข้อกำหนดของเราสำหรับภาพพื้นหลังจึงเป็นดังนี้:

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

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

ตั้งค่าพื้นหลังให้คงที่และอยู่ตรงกลาง จากนั้นปรับขนาดโดยใช้ background-size: cover

Html ( ภาพพื้นหลัง: url (ภาพ/พื้นหลัง.jpg); พื้นหลังซ้ำ: ไม่ซ้ำ; ตำแหน่งพื้นหลัง: กึ่งกลางตรงกลาง; สิ่งที่แนบมากับพื้นหลัง: คงที่; -webkit-พื้นหลังขนาด: ปก; -moz-พื้นหลัง- ขนาด: ปก; -o-พื้นหลัง-ขนาด: ปก; พื้นหลัง-ขนาด: ปก )

วิธีนี้ได้ผลใน

Chrome (เวอร์ชันใดก็ได้) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

หากความกว้างของหน้าต่างเล็กกว่าความกว้างของรูปภาพ ระบบจะใช้คิวรี่สื่อเพื่อจัดพื้นหลังให้อยู่ตรงกลาง

img.พื้นหลัง ( ความสูงขั้นต่ำ: 100%; ความกว้างขั้นต่ำ: 640px; ความกว้าง: 100%; ความสูง: อัตโนมัติ; ตำแหน่ง: คงที่; บน: 0; ซ้าย: 0; /* ขึ้นอยู่กับขนาดรูปภาพ */ หน้าจอ @media และ (ความกว้างสูงสุด: 640px)( img.bg ( ซ้าย: 50%; ระยะขอบซ้าย: -320px; ) ) )

วิธีนี้ใช้ได้กับ:

• เบราว์เซอร์ที่ดีทุกเวอร์ชัน (Chrome, Opera, Firefox, Safari)
• ไออี 9+

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

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

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

วิธีนี้ได้ผลใน เบราว์เซอร์ที่ดีและ IE 8+

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

สวัสดี วันนี้เราจะมาดูกันว่าคุณสามารถขยายพื้นหลังโดยใช้เครื่องมือ CSS ได้อย่างไร (โดยไม่ต้องใช้เครื่องมืออื่นๆ เช่น JavaScript และอื่นๆ ที่คล้ายคลึงกัน)

มันเป็นไปได้ที่จะขยายพื้นหลัง CSS โดยใช้วิธี CSS3 โดยเฉพาะการใช้คุณสมบัติขนาดพื้นหลัง ฉันต้องบอกว่าคุณสมบัตินี้ทำงานได้ดีกว่าโซลูชันที่คล้ายกันใน Javascript (ซึ่งใช้ก่อนที่จะปรากฏขนาดพื้นหลัง) เนื่องจากมันจะตอบสนองเร็วขึ้นและเพียงพอต่อการเปลี่ยนแปลงขนาดเบราว์เซอร์ ทำให้ภาพที่ขยายออกมาเรียบขึ้นเร็วขึ้น และในขณะที่ พวกเขาชอบพูดในช่วงต้นทศวรรษ 2000 x, - "จะทำงานได้แม้จะปิดการใช้งาน Javascript ก็ตาม"

คุณสมบัติขนาดพื้นหลังสามารถมีได้หลายค่า
1) นี่อาจเป็นหนึ่งในคำสั่ง: ครอบคลุมหรือมี

ขนาดพื้นหลัง: ประกอบด้วย; /* ปรับขนาดรูปภาพโดยยังคงรักษาสัดส่วนเพื่อให้รูปภาพทั้งหมดพอดีภายในบล็อก */ ขนาดพื้นหลัง: ปก; /* ปรับขนาดรูปภาพโดยคงอัตราส่วนไว้เพื่อให้ความกว้างหรือความสูงเท่ากับความกว้างหรือความสูงของบล็อก -

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

ขนาดพื้นหลัง: 100%; /*เทียบเท่ากับคำสั่งหน้าปก*/ ขนาดพื้นหลัง: 100% 50%; /*ความกว้างจะเป็น 100% ของความกว้างของบล็อก แต่ความสูงจะอยู่ที่ 50% เท่านั้น รูปภาพส่วนใหญ่จะเสียรูป*/

3) ค่าตัวเลขโดยตรง (เป็น piskels, เซนติเมตร, em ฯลฯ ) อาจมีพารามิเตอร์ 2 (หรือ 1) ตัวก็ได้ เช่นเดียวกับในกรณีก่อนหน้า
4) ค่าอัตโนมัติ แสดงว่าภาพจะไม่ยืดแต่จะใช้ขนาดเดิม ในกรณีนี้สามารถมีได้ 2 หรือ 1 พารามิเตอร์ นั่นคือคุณสามารถระบุสิ่งต่อไปนี้:

ขนาดพื้นหลัง: อัตโนมัติ 60%; /*ความกว้างของภาพจะเป็น 60% และความสูงจะเป็นสัดส่วนกับขนาดของภาพต้นฉบับ*/

ตัดสินโดยเว็บไซต์ Can I Use มันจะใช้งานได้ทั้งหมด เบราว์เซอร์ที่ทันสมัยรวมถึงเวอร์ชัน IE ที่ไม่ต่ำกว่า 9 ด้วย ดังนั้นโดยหลักการแล้วไม่มีเหตุผลที่จะต้องกังวล ดูตารางความเข้ากันได้:

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

ด้านล่างนี้ฉันจะแสดง 3 วิธีที่ขยายพื้นหลังให้เต็มความกว้างของหน้าจอ

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

เราจะยืดภาพนี้กับสาวน่ารักให้เต็มจอ :)

โดยทั่วไป เราจะกำหนดบล็อกที่เรากำหนดสไตล์และเพิ่มลงในไฟล์สไตล์ บล็อกนี้, รหัสต่อไปนี้:

เนื้อความ ( พื้นหลัง: url (รูปภาพ/bg.jpg) ไม่ทำซ้ำตรงกลางด้านบนคงที่; -webkit-พื้นหลังขนาด: ปก; -moz-พื้นหลังขนาด: ปก; -o-พื้นหลังขนาด: ปก; ขนาดพื้นหลัง: ปิดบัง)

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

วิธีการนั้นง่ายมาก ฉันมักจะใช้มันและมันเหมาะกับฉัน 100% มีเพียงสิ่งเดียวเท่านั้น เบราว์เซอร์รุ่นเก่าไม่คุ้นเคยกับ CSS3 ดังนั้นผู้ที่ใช้เวอร์ชันเก่าจะไม่เห็นผลลัพธ์ที่ต้องการ

วิธีนี้ใช้ CSS ปกติ โดยพื้นฐานแล้วมันก็ง่ายเช่นกัน เราแสดงรูปภาพในส่วนเนื้อหาของไซต์โดยกำหนด id - bg :

และเราเขียนสไตล์:

#bg ( ตำแหน่ง:คงที่; ดัชนี z: -1; บน:0; ซ้าย:0; ความกว้างขั้นต่ำ:100%; ความสูงขั้นต่ำ:100%; )

การวางตำแหน่งได้รับการแก้ไขแล้วและขยายออกไปทั่วทั้งหน้าจอ ทำได้ง่ายนิดเดียว :)

jQuery ถูกใช้ที่นี่ ดังนั้นคุณต้องเชื่อมต่อไลบรารีก่อนหากไม่ได้เชื่อมต่อไว้ก่อนหน้านี้

หลังจากไลบรารี เราจะเชื่อมต่อสคริปต์ ซึ่งจะปรับขนาดพื้นหลังของเรา

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

และในตอนท้ายเราก็เพิ่มสไตล์เพื่อให้ทุกอย่างใช้งานได้ เปิดไฟล์สไตล์และเพิ่มโค้ดต่อไปนี้:

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

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

ระบุพารามิเตอร์ด้วย - z-index: -1 เพื่อให้รูปภาพอยู่ด้านหลังข้อความ หากคุณไม่มีข้อความที่ควรอยู่ข้างหน้า คุณสามารถลบตัวเลือกนี้ได้

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

เพียงเท่านี้ ขอบคุณสำหรับความสนใจของคุณ

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

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

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

ในการดำเนินการนี้ คุณเพียงแค่ต้องเขียนบรรทัดนี้:

ขนาดพื้นหลัง: อัตโนมัติ 100%

พารามิเตอร์แรกคือ 100% รับผิดชอบในการยืดภาพในแนวนอน พารามิเตอร์ที่สอง – แนวตั้ง ตอนนี้เรามาดูตัวอย่างกัน

ตัวอย่างด้วยเนื้อหา CSS ( พื้นหลัง: url(http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg) ไม่ทำซ้ำตรงกลางด้านบนคงที่ -moz-พื้นหลังขนาด: อัตโนมัติ 100% -webkit- ขนาดพื้นหลัง: อัตโนมัติ 100%; -o-พื้นหลังขนาด: อัตโนมัติ 100%; ขนาดพื้นหลัง: อัตโนมัติ 100%; สี:#191970; % 4% 4%; ข้อความเงา: 3px 2px 1px #fff;

วิธีการนี้รองรับโดยเบราว์เซอร์ตั้งแต่เวอร์ชัน 10, Safari เวอร์ชัน 3, Firefox 3.6 และ IE เวอร์ชัน 9

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

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

jQuery นั้นสะดวกมาก ช่วยให้ทำงานกับ API ได้ง่ายขึ้น เข้าถึงองค์ประกอบโค้ดต่างๆ ได้ง่ายขึ้น และยังปรับใช้บางอย่างได้ง่ายขึ้นอีกด้วย

เพื่อให้มันใช้งานได้ตามตัวอย่าง วิธีนี้ก่อนอื่นคุณต้องเชื่อมต่อสคริปต์ js กับบรรทัดนี้:

ด้านล่างนี้ฉันได้แนบโค้ดตัวอย่างพร้อมกับการนำ jQuery ไปใช้แล้ว

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

ตัวอย่าง jQuery< aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); }); ท้องฟ้าจำลองในพื้นที่เปิดโล่ง! สัมผัสประสบการณ์ดวงดาว ดาวเคราะห์ และหลุมอุกกาบาตทางจันทรคติอันห่างไกล...

ตัวอย่างเนื้อหา jQuery ( background-size: cover; color:#191970; ) div ( พื้นหลัง: #6495ED; width: 86%; Margin: 14% 4% 4% 4%; padding: 35px; ) h1 ( color: # 191970; text-shadow: 3px 2px 1px #fff; ) #b-g ( บน: 0; ซ้าย: 0; z-index:-1; ตำแหน่ง: คงที่; ) .b-g-w ( กว้าง: 100%; ) .b-g-h ( ความสูง: 100%; ) $(window).load(function() ( var wind = $(window), $b-g = $("#b-g"), อัตราส่วนภาพ = $b-g.width() / $b-g.height(); ฟังก์ชั่น resizeBg() ( ถ้า ((wind.width() / wind.height())< aspectRatio) { $b-g .removeClass() .addClass("b-g-h"); } else { $b-g .removeClass() .addClass("b-g-w"); } } wind.resize(function() { resizeBg(); }).trigger("resize"); }); ท้องฟ้าจำลองในพื้นที่เปิดโล่ง!

สัมผัสประสบการณ์ดวงดาว ดาวเคราะห์ และหลุมอุกกาบาตทางจันทรคติอันห่างไกล...

วิธีนี้เป็นสากลและรองรับโดยเบราว์เซอร์จำนวนมาก แม้ว่าเครื่องมือ CSS จะไม่ทำงานก็ตาม

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

หากต้องการแทรกโค้ด คุณต้องเขียนข้อความในวงเล็บดังนี้:

ตอนนี้คุณเพียงแค่ต้องแทรกสองสามบรรทัดลงในตัวอย่างดั้งเดิม: