วิธีสร้างพื้นหลังรูปภาพใน HTML และ CSS 3 วิธีง่ายๆ

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

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

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

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

กำหนดสีของแผนกลับออกจากจานสี สีของทายาทมักเกิดขึ้นพร้อมกับสีขององค์ประกอบบรรพบุรุษ

วิธีที่ 1

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

ติดตั้งพื้นหลังคงที่และกึ่งกลางแล้วปรับขนาดของมันโดยใช้ ขนาดพื้นหลัง: ปก .

html { 

พื้นหลังภาพ: URL (รูปภาพ / พื้นหลัง JPG);

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

ตำแหน่งพื้นหลัง: ศูนย์กลาง;

สิ่งที่แนบมาพื้นหลัง: แก้ไข;

-Webkit-พื้นหลังขนาด: ปก;

-Moz- ขนาดพื้นหลัง: ปก;

-o- ขนาดพื้นหลัง: ปก;

ขนาดพื้นหลัง: ปก; 
} 

การสาธิต

วิธีนี้ใช้งานได้

  • Chrome (รุ่นใดก็ได้)
  • โอเปร่า 10+

Firefox 3.6+

Safari 3+

IE 9+

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

พื้นหลังภาพ: URL (รูปภาพ / พื้นหลัง JPG);

วิธีที่ 2

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

หากความกว้างของหน้าต่างน้อยกว่าความกว้างของภาพแบบสอบถามสื่อจะถูกใช้เพื่อจัดตำแหน่งพื้นหลังในศูนย์

สืบทอด

<img src = "/ images / background.jpg" class = "พื้นหลัง" />

img.background { ขั้นต่ำความสูง: 100%; ขั้นต่ำความกว้าง: 640px; ความกว้าง: 100%; ความสูง: อัตโนมัติ;

ตำแหน่ง: แก้ไข; ด้านบน: 0; ซ้าย: 0;

/ * ขึ้นอยู่กับขนาดของภาพ * /

@Media Screen และ (Max-width: 640px) { img.bg { и ซ้าย: 50%; Margin-Left: -320px; } } } การสาธิต

สืบทอดคุณสมบัติทั้งหมดขององค์ประกอบหลัก

วิธีนี้ทำงานใน:

เบราว์เซอร์ที่ดีรุ่นใด ๆ (Chrome, Opera, Firefox, Safari) IE 9+ и วิธีที่ 3 . อีกวิธีหนึ่งดังต่อไปนี้: แก้ไขรูปภาพ <img /> ไปที่มุมซ้ายบนของหน้าและยืดโดยใช้คุณสมบัติขั้นต่ำความกว้างและความสูงต่ำ 100% ในขณะที่รักษาอัตราส่วนภาพ จริงด้วยวิธีนี้ภาพไม่ได้อยู่กึ่งกลาง แต่ปัญหานี้ได้รับการแก้ไขโดยห่อภาพใน <div /> ซึ่งเราทำขนาดของหน้าต่าง 2 เท่า และภาพลักษณ์ของตัวเองเรายืดและใส่ตรงกลาง <div class = "พื้นหลัง"> <img src = "/ images / background.jpg" />

</ div> div.background { <div class = "พื้นหลัง"> ตำแหน่ง: แก้ไข;

ด้านบน: -50%;

ซ้าย: -50%; } ความกว้าง: 200%; ความสูง: 200%; }

img { ตำแหน่ง: แน่นอน; ด้านบน: 0;

ซ้าย: 0; ขวา: 0; :

ด้านล่าง: 0;

มาร์จิ้น: อัตโนมัติ; ความกว้างขั้นต่ำ: 50%; ขั้นต่ำความสูง: 50%; } .

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

ฉันหวังว่าข้อมูลนี้จะเป็นประโยชน์สำหรับคุณ โดยส่วนตัวฉันมักจะใช้วิธีการเหล่านี้โดยเฉพาะอย่างยิ่งครั้งแรก แน่นอนมีวิธีอื่น ๆ ในการวางภาพที่พื้นหลังด้านหลังด้วย CSS หากคุณรู้เกี่ยวกับพวกเขาแบ่งปันโปรดแสดงความคิดเห็น ตั้งค่าสีพื้นหลังและ / หรือรูปภาพสำหรับหน้าหรือรายการแยกต่างหากนั้นง่ายพอ สิ่งสำคัญคือการรู้ว่าจะทำอย่างไรและวิธีการที่จะทำเช่นเดียวกับการมีรหัสสีและ / หรือภาพพื้นหลัง เป็นไปได้ว่าจากบทความนี้คุณจะได้เรียนรู้สิ่งใหม่ ๆ มากมาย แต่ฉันสร้างขึ้นโดยเฉพาะสำหรับผู้เริ่มต้น ดังนั้นทุกอย่างจะสั้นที่สุดเท่าที่จะเป็นไปได้และในรายละเอียดพร้อมกัน สิ่งสำคัญคือคุณจะไม่เพียง แต่จะได้รับการนำเสนอโดยรวมและตัวอย่างสำเร็จรูป แต่ยังเข้าใจวิธีการสร้างพื้นหลังใน HTML ในการตั้งพื้นหลังใน HTML ใช้ DOCTYPE ระดับกลาง และฉันจะเริ่มต้นด้วยความจริงที่ว่า HTML5 ไม่มีความเป็นไปได้ที่จะตั้งค่าพื้นหลังสำหรับเว็บไซต์ คุณลักษณะนี้ได้ตัดสินใจที่จะทนต่อ CSS ดังนั้นหากคุณวางแผนที่จะใช้ด้านล่างและคุณต้องการที่จะได้รับที่ถูกต้อง » (แก้ไข) รหัสคุณต้องอยู่ที่ประเภทการเปลี่ยนแปลงของเอกสาร เมื่อต้องการทำเช่นนี้หน้าเว็บของคุณควรเริ่มต้นด้วยบรรทัดต่อไปนี้: <! DOCTYPE HTML สาธารณะ "- // W3C // DTD HTML 4.01 » เกี่ยวกับการเปลี่ยนผ่าน // en "" http://www.w3.org/tr/html4/loose.dtd ">

เวลาสำหรับชั้นเรียนภาคปฏิบัติ

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

สีพื้นหลัง

ภาพพื้นหลัง

. ที่จุดเริ่มต้นไป

สีพื้นหลัง ซ้าย: 50%; ซึ่งน้ำท่วมพื้นที่หน้าเว็บทั้งหมดหรือองค์ประกอบทั้งหมด ซ้ำแล้วซ้ำอีกด้านบนของมัน ภาพพื้นหลัง }

. ภาพสามารถแสดงได้ดังนี้: ตำแหน่ง: แน่นอน; ด้านบน: 0;

พื้นหลังของเอกสาร HTML และองค์ประกอบของมัน

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

สิ่งที่สองที่คุณต้องรู้คือความแตกต่างระหว่าง

เอกสารของเอกสาร ขวา: 0; :

องค์ประกอบของเอกสาร

เอกสารของเอกสาร

ระบุไว้ในรหัส HTML ของแท็กหน้าเว็บ

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

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

แอตทริบิวต์ bgColor เพื่อสร้างสีพื้นหลัง

เพื่อถาม

เอกสารหรือองค์ประกอบของมันถูกใช้แอตทริบิวต์ ความสูง: 200%; и ภาพพื้นหลัง bgColor , เช่น: <ร่างกาย BGColor = "# EC008C">

<! - เนื้อหาเอกสาร ->

</ body>

ในกรณีนี้เราตั้งค่าสีพื้นหลังสำหรับหน้าโดยรวม แต่ตัวอย่างของวิธีการตั้งค่าสีพื้นหลังสำหรับตารางในแท็ก โต๊ะ <ตาราง BGColor = "# EC008C"> <TR> <TD> ข้อความที่มีพื้นหลัง </ td> </ td> </ tr> </ table>

เป็นที่น่าสังเกตว่าสีพื้นหลังในตารางสามารถระบุได้สำหรับแถวในแท็ก

tr และสำหรับเซลล์ของพวกเขาในแท็ก td

วิธีการค้นหารหัสสี? คุณอาจสังเกตเห็นแล้วว่าสีใน HTML ถูกตั้งค่าเป็นพิเศษ รหัส HTML , เช่น:

# EC008C

  • . ในการค้นหารหัสที่คุณต้องการสีที่คุณสามารถใช้หนึ่งในบรรณาธิการกราฟิก ตัวอย่างเช่นใน Photoshop ที่คุณสามารถใช้ "
  • เครื่องมือ eyedropper
  • (ปิเปต)

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

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

นอกจากนี้คุณยังสามารถใช้บริการออนไลน์จำนวนมากเช่น: 
หลักการของงานของพวกเขาง่ายยิ่งขึ้น - คลิกสีที่ต้องการและรับรหัส คุณสมบัติของแอตทริบิวต์เพื่อสร้างภาพพื้นหลัง เช่นเดียวกับในกรณีของสีพื้นหลังและในกรณีของ
คุณต้องใช้แอตทริบิวต์พิเศษคือ 
พื้นหลัง. 
<body background = "/ 2014/06 / bg.jpg">

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

<พื้นหลังตาราง = "/ 2014/06 / bg.jpg"> <tr> <td> ข้อความที่มีพื้นหลัง </ td> </ td> </ tr> </ table> HTML เป็นที่น่าสังเกตว่าภาพพื้นหลังสามารถตั้งค่าเฉพาะสำหรับตารางโดยรวมและ / หรือเซลล์ที่แยกต่างหาก สำหรับสตริงมันจะไม่ทำงาน คุณสมบัติของแอตทริบิวต์เพื่อสร้างภาพพื้นหลัง .

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

มันเต็ม URL <background body = "/ images / bg.jpg"> .

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

มาสรุปกันเถอะ 
การใช้แอตทริบิวต์ ล้าสมัยทางศีลธรรมเพราะสำหรับความถูกต้องของรหัส HTML คุณจะต้องใช้การเปลี่ยนผ่าน DOCTYPE

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

ลิงค์สั้น: http://goo.gl/03tsnz วิธีสร้างพื้นหลังสำหรับเว็บไซต์? ทุกห้องจะดูดีขึ้นมากถ้าพื้นของเธอเพิ่มขึ้นที่รักพรมเปอร์เซีย ดังนั้นเว็บไซต์ของคุณแย่ลง? อาจถึงเวลาและพื้นของเขา " ตั้ง
  • »พระราชวังแฮนด์เมดที่หรูหราราคาแพง เราจะเข้าใจเพิ่มเติมเกี่ยวกับวิธีสร้างพื้นหลังสำหรับเว็บไซต์:
  • มันเกิดขึ้นที่การออกแบบเก่าของเว็บไซต์ได้มาแล้ว และฉันต้องการสิ่งใหม่และอร่อย และการออกแบบใหม่จะเป็นเช่นนั้นถ้าคุณปรุงด้วยมือของคุณเอง
  • แต่การเปลี่ยนการออกแบบทั้งหมดของทรัพยากรอย่างสมบูรณ์ - สิ่งที่ไม่เนรคุณ ใช่แล้วไม่ใช่ทุกคนที่มีสิ่งนี้เกี่ยวกับเรื่องนี้ "
  • ซึ่งคมชัด

" มือ. ดังนั้นจึงเป็นวิธีที่ง่ายที่สุดในการรีเฟรชเทมเพลตเก่าเปลี่ยนสีของพื้นหลังของทรัพยากรหรือภาพพื้นหลัง

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

สีพื้นหลัง.

คุณลักษณะสไตล์ 

สไตล์. . นั่นคือเพื่อตั้งค่าสีพื้นฐานสำหรับเว็บเพจคุณต้องลงทะเบียนภายในแท็ก <body> ตัวอย่างเช่น: <body style = "พื้นหลังสี: # 55d52b"> <p> พื้นหลังของไซต์ # 55d52b </ p> </ body>

นอกเหนือจากรหัสสีเลขฐานสิบหกค่าได้รับการสนับสนุนในรูปแบบคำหลักหรือ

rgb 

. ตัวอย่าง:

<body style = "พื้นหลัง - สี: RGB (51,255,153)"> <p> พื้นหลังของเว็บไซต์ RGB (23,113,44) </ p> </ body> <สไตล์ร่างกาย = "พื้นหลังสี: สีเขียว"> <p> พื้นหลังของเว็บไซต์สีเขียว </ p> </ body> การตั้งค่าสีพื้นหลังโดยใช้คำหลักมีข้อ จำกัด จำนวนมากเมื่อเทียบกับสองวิธีที่เหลือ

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

สีขาว, สีแดง, สีฟ้า, สีดำ, สีเหลือง อื่น ๆ ดังนั้นเพื่อตั้งพื้นหลังสำหรับเว็บไซต์

เป็นการดีกว่าที่จะใช้รูปแบบเลขฐานสิบหกหรือ 

นอกเหนือจากการเลือกสีการตั้งค่าอื่น ๆ ที่มีอยู่ ถ้าทรัพย์สิน ตั้งค่า โปร่งใส

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

ตัวอย่าง: 

<Body Style = "Background-Image: URL (IMG_1809.jpg)"> </ body>

ดังที่สามารถมองเห็นได้จากรหัสการผูกภาพจะเกิดขึ้นผ่านเส้นทาง

url

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

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

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

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

พื้นหลังซ้ำ . ค่าที่เป็นไปได้: Repeep-X - การทำซ้ำภาพพื้นหลังในแนวนอน

ดังนั้นเราอำนวยความสะดวกในการตั้งค่าพื้นหลังด้านหลังจากสองภาพ: ภาพเคลื่อนไหวและภาพปกติ ในกรณีนี้อนิเมชั่น GIF จะได้รับการแก้ไขและการวาดภาพจะเลื่อนไปพร้อมกับเนื้อหาของหน้า

ทำซ้ำ Y - ในแนวตั้ง;

ทำซ้ำ - บนแกนทั้งสอง;

ห้ามทำซ้ำ - ซ้ำ - การทำซ้ำถูกห้าม

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

<Body Style = "Background-Image: URL (3.jpg); พื้นหลังซ้ำ: ไม่ทำซ้ำ"> </ body>

แต่แน่นอนว่ามันจะดีกว่าถ้า Letow ของเราตั้งอยู่กลางหน้าจอ อสังหาริมทรัพย์

ตำแหน่งพื้นหลัง เพียงตั้งใจจะวางตำแหน่งรูปแบบพื้นหลังบนหน้า ตั้งค่าพิกัดตำแหน่งในหลายวิธี:
. นั่นคือเพื่อตั้งค่าสีพื้นฐานสำหรับเว็บเพจคุณต้องลงทะเบียนภายในแท็ก <body> ตัวอย่างเช่น: คำสำคัญ (
<background body = "/ images / bg.jpg"> ด้านบน, ด้านล่าง, กลาง, ซ้าย, ขวา)
หรือ เปอร์เซ็นต์ - การนับถอยหลังเริ่มต้นจากมุมซ้ายบน
ทุกห้องจะดูดีขึ้นมากถ้าพื้นของเธอเพิ่มขึ้นที่รักพรมเปอร์เซีย ดังนั้นเว็บไซต์ของคุณแย่ลง? อาจถึงเวลาและพื้นของเขา " ในหน่วยวัด (
(การเลือกสี) พิกเซล
. เราใช้ตัวเลือกที่ง่ายที่สุดสำหรับการอยู่ตรงกลาง:

<Body Style = "Background-Image: URL (3.jpg); พื้นหลังซ้ำ: ไม่ทำซ้ำ; ตำแหน่งพื้นหลัง: Top Center"> </ body>

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

พื้นหลังสิ่งที่แนบมา

. ค่าที่ถูกต้อง: <ul> <li> เลื่อน </ li> <li> แก้ไข </ li> </ ul>

เราต้องการความหมายสุดท้าย ตอนนี้รหัสตัวอย่างของเราจะมีลักษณะเช่นนี้: [/ html] 
<body style = "พื้นหลังภาพ: URL (3.jpg); พื้นหลังซ้ำ: ไม่ทำซ้ำ; พื้นหลังตำแหน่ง: Top center; ความผูกพันพื้นหลัง: แก้ไข"> </ body> 

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

โวลุ่มนี้ไม่มีผลต่อความเร็วในการดาวน์โหลดของหน้าเบราว์เซอร์ที่มีการเชื่อมต่อความเร็วสูงกับอินเทอร์เน็ต แต่สิ่งที่เกี่ยวกับอินเทอร์เน็ตบนมือถือเมื่อใช้การดาวน์โหลดของหลาย "

เมตร

"จะใช้เวลามาก?

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

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

<body style = "พื้นหลังภาพ: URL (1.png); สี: RGB (0,51,204)"> </ body>

เพื่อความชัดเจนเราเพิ่มข้อความและตั้งค่าสีโดยใช้คุณสมบัติ ร่างกาย. สี ร่างกาย. . นั่นคือสิ่งที่เกิดขึ้น:

  • ความสูง: 200%; คุณสมบัติทั้งหมดที่อธิบายไว้ข้างต้นนอกจากนี้ยังใช้งานได้กับสไตล์ Cascading Style สร้างพื้นหลังของเว็บไซต์
  • ภาพพื้นหลัง css
  • โดยการเขียนรหัสใหม่ของตัวอย่างก่อนหน้าของเรา: <head> <title> เอกสารไม่มีชื่อ </ title> <style type = "text / css"> body {background-image: url (3.jpg); พื้นหลัง - ซ้ำ: ไม่ทำซ้ำ; - ตำแหน่งพื้นหลัง: Top Center; พื้นหลังสิ่งที่แนบมา: แก้ไข;} </ style> </ head> <body> </ body>
  • ผลลัพธ์จะคล้ายกัน เราดูตัวเลือกทั้งหมดวิธีการเปลี่ยนพื้นหลังบนเว็บไซต์ ตอนนี้มันยังคงเป็นเพียงการสร้างภาพวาดของพรมในอนาคตและกระจายไปยังหน้าทรัพยากรของคุณ แต่นี่เป็นมือของคุณ
  • วันที่ดีสำหรับทุกคนที่จะเรียนรู้และเรียนรู้สิ่งใหม่ ๆ ! คุณเคยให้ความสนใจกับการปรากฏตัวของเว็บไซต์เมื่อพัฒนาผู้สร้างขี้เกียจที่จะจัดการพื้นหลังของหน้าหรือไม่? และฉันก็หัน มันดูฆ่า บ่อยครั้งเนื่องจากการขาดการแยกตามปกติระหว่างข้อมูลประเภทต่าง ๆ มันถูกผสมและหายไปเพียงความปรารถนาที่จะดูข้อมูลทางเว็บดังกล่าว เพื่อให้ปัญหาดังกล่าวเกิดขึ้นกับโครงการของคุณฉันตัดสินใจที่จะเขียนบทความในหัวข้อ: "วิธีสร้างพื้นหลังของหน้าใน HTML" หลังจากอ่านสิ่งพิมพ์แล้วคุณจะได้เรียนรู้ด้วยเครื่องมือที่คุณสามารถตั้งค่าการออกแบบพื้นหลังวิธีการสร้างพื้นหลังหรือเปลี่ยนแปลงและอื่น ๆ อีกมากมายซึ่งจะช่วยให้เว็บไซต์ของคุณน่าสนใจ ตอนนี้เริ่มกันเลย!
  • เครื่องมือพื้นฐานสำหรับการตั้งค่าหน้าเว็บพื้นหลัง ในการตั้งค่าภาพพื้นหลังนักพัฒนาเว็บภาษาได้ให้พื้นหลังแอตทริบิวต์ มันมีอยู่ทั้งใน HTML และ CSS
  • ในภาษามาร์กอัปนี่เป็นแอตทริบิวต์ของแท็กร่างกายและในรูปแบบตาราง - คุณสมบัติสากลที่ให้คุณตั้งค่าได้ถึง 5 ลักษณะของแผนหลังในเวลาเดียวกัน พื้นหลังเป็นองค์ประกอบที่ค่อนข้างยืดหยุ่นที่สามารถใช้งานพื้นหลังเป็นสีภาพสีหรือแม้แต่ภาพเคลื่อนไหว ดังนั้นในการติดตั้งภาพพื้นหลังผ่านหน่วย HTML <body> มันก็เพียงพอที่จะเขียนรหัสดังกล่าว:
  • <body background = "ที่อยู่ไฟล์"> ... </ body> และแทนที่จะเป็นคำว่า "ที่อยู่ไฟล์" แทรกพา ธ ไปยังรูปภาพ
  • อย่างไรก็ตามสังเกตเห็น! หากอยู่ในรูปแบบของพื้นหลังที่คุณต้องการดูผ้าใบ Monochon ที่ระบุจากจานสีแล้วทำได้โดยใช้แอตทริบิวต์ BGColor ตัวอย่างเช่น <Body BGColor = "# 000000"> ... </ body> เราถามพื้นหลังสีดำสำหรับเว็บไซต์ของเรา
  • สีใน CSS และ HTML ตั้งค่าโดยคำภาษาอังกฤษ (ตัวอย่างเช่นสีแดง) หรือรหัสพิเศษที่ประกอบด้วยเครื่องหมาย # และอักขระหกตัวหลังจากนั้น (ตัวอย่างเช่น # FFDAB9) เมื่อพิมพ์ตัวเลือกที่สองในผลิตภัณฑ์ซอฟต์แวร์เฉพาะสำหรับนักพัฒนาพาเล็ตจะปรากฏต่อหน้าคุณโดยอัตโนมัติ หากคุณเพิ่งเริ่มเรียนรู้ภาษาเว็บเหล่านี้รหัสสีสามารถ spacked บนอินเทอร์เน็ต

พื้นหลังเป็นคุณสมบัติในตารางสไตล์ Cascading ความสูง: 200%; :

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

พารามิเตอร์ วัตถุประสงค์

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

ตั้งค่าภาพพื้นหลัง อาจระบุได้พร้อมกับสี จากนั้นหลังจะปรากฏขึ้นจนกว่ารูปภาพจะถูกโหลดอย่างสมบูรณ์

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

ใช้เมื่อใช้แอตทริบิวต์ภาพพื้นหลัง ควบคุมว่าภาพจะทำซ้ำได้อย่างไร คุณสามารถระบุ 2 ค่า: สำหรับแนวนอนและแนวตั้ง มีลักษณะ: ไม่ทำซ้ำ, ทำซ้ำ, ทำซ้ำ, x, reeple-y, สืบทอด, พื้นที่

Добавить комментарий