การเขียนโปรแกรม html

13

ฉันจะยืดภาพพื้นหลังให้ครอบคลุมองค์ประกอบ HTML ทั้งหมดได้อย่างไร

ฉันกำลังพยายามหาภาพพื้นหลังขององค์ประกอบ HTML (body, div ฯลฯ ) เพื่อยืดความกว้างและความสูงทั้งหมด ไม่ค่อยมีโชค. เป็นไปได้หรือไม่หรือต้องทำวิธีอื่นนอกจากเป็นภาพพื้นหลัง css ปัจจุบันของฉันคือ: body { background-position: left top; background-image: url(_images/home.jpg); background-repeat: no-repeat; } ขอบคุณล่วงหน้า. แก้ไข: ฉันไม่กระตือรือร้นที่จะดูแล CSS ในคำแนะนำของ Gabriel ดังนั้นฉันจึงเปลี่ยนเค้าโครงของหน้าแทน แต่ดูเหมือนว่าจะเป็นคำตอบที่ดีที่สุดดังนั้นฉันจึงทำเครื่องหมายเป็นเช่นนั้น

90 html css background-image

6

หรี่หน้าจอทั้งหมดยกเว้นพื้นที่คงที่?

ฉันต้องการสร้างบทช่วยสอนซึ่งจะนำผู้ใช้ไปยังตำแหน่งที่คลิก ฉันพยายามที่จะครอบคลุมทั้งหน้าจอด้วย<div>ซึ่งจะสลัวองค์ประกอบทั้งหมดยกเว้นพื้นที่เฉพาะที่อยู่ในการแก้ไขwidth, height, และtopleft ปัญหาคือฉันไม่สามารถหาวิธี "ยกเลิก" ของผู้ปกครองได้background-color(ซึ่งก็โปร่งใสเช่นกัน) ในด้านล่างนี้holeคือ div ที่ควรจะไม่มีเลยbackground-colorรวมถึงพาเรนต์ด้วย สิ่งนี้จะสำเร็จได้หรือไม่? ความคิดใด ๆ ? #bg{ background-color:gray; opacity:0.6; width:100%; height:100vh; } #hole{ position:fixed; top:100px; left:100px; width:100px; height:100px; } <div id="bg"> <div id="hole"></div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด นี่คือภาพจำลองของสิ่งที่ฉันพยายามบรรลุ:

90 javascript jquery html css

6

CSS จัดแนว div ลอยในแนวตั้ง

ฉันมี div (#wrapper) ที่มี 2 div ที่ยืนเคียงข้างกัน ฉันต้องการให้ div ด้านขวาอยู่ในแนวตั้ง ฉันลองจัดแนวตั้ง: ตรงกลางบนกระดาษห่อหลัก แต่ใช้งานไม่ได้ มันทำให้ฉันแทบคลั่ง! หวังว่าจะมีคนช่วยได้ http://cssdesk.com/LWFhW HTML: <div id="wrapper"> <div id="left-div"> <ul> <li>One</li> <li>Two</li> </ul> </div> <div id="right-div"> Here some text... </div> </div> CSS: #wrapper{ width:400px; float:left; height:auto; border:1px solid purple;} #left-div{ width:40px; border:1px solid blue; float:left;} #right-div{ width:350px; border:1px …

90 html css

2

แอตทริบิวต์บทบาท HTML5 / XHTML มีค่าอะไรได้บ้าง

ฉันสงสัยว่าค่าใดที่ใช้ได้ในแอตทริบิวต์บทบาท HTML5 / XHTML

90 html

3

การเลื่อนไม่มีที่สิ้นสุดด้วย React JS

ฉันกำลังมองหาวิธีใช้การเลื่อนแบบไม่มีที่สิ้นสุดด้วย React ฉันเจอreact-infinite-scrollและพบว่ามันไม่มีประสิทธิภาพเพราะมันเพิ่มโหนดไปยัง DOM และไม่ได้ลบออก มีโซลูชันที่พิสูจน์แล้วด้วย React ซึ่งจะเพิ่มลบและรักษาจำนวนโหนดใน DOM ให้คงที่ นี่คือปัญหาjsfiddle ในปัญหานี้ฉันต้องการให้มีองค์ประกอบใน DOM ครั้งละ 50 รายการเท่านั้น อื่น ๆ ควรจะโหลดและลบออกเมื่อผู้ใช้เลื่อนขึ้นและลง เราได้เริ่มใช้ React เนื่องจากอัลกอริทึมการเพิ่มประสิทธิภาพ ตอนนี้ฉันไม่พบวิธีแก้ปัญหานี้ ฉันได้เจอAirbnb js แต่จะใช้กับ Jquery ในการใช้การเลื่อนแบบไม่มีที่สิ้นสุดของ airbnb ฉันต้องคลายการเพิ่มประสิทธิภาพการตอบสนองซึ่งฉันไม่ต้องการทำ รหัสตัวอย่างที่ฉันต้องการเพิ่มการเลื่อนคือ (ที่นี่ฉันกำลังโหลดรายการทั้งหมดเป้าหมายของฉันคือโหลดครั้งละ 50 รายการเท่านั้น) /** @jsx React.DOM */ var Hello = React.createClass({ render: function() { return (<li>Hello {this.props.name}</li>); } }); …

90 javascript html infinite-scroll reactjs

8

ภาพพื้นหลังกว้าง 100% ที่มีความสูง "อัตโนมัติ"

ฉันกำลังทำงานกับหน้า Landing Page สำหรับมือถือของ บริษัท แห่งหนึ่ง มันเป็นเลย์เอาต์พื้นฐานจริงๆ แต่ด้านล่างส่วนหัวจะมีรูปภาพของผลิตภัณฑ์ซึ่งจะมีความกว้าง 100% เสมอ (การออกแบบจะแสดงให้เห็นว่ามันเรียงจากขอบถึงขอบเสมอ) ขึ้นอยู่กับความกว้างของหน้าจอความสูงของภาพจะปรับตามอย่างเห็นได้ชัด เดิมทีฉันทำสิ่งนี้ด้วย img (โดยมีความกว้าง CSS 100%) และใช้งานได้ดี แต่ฉันรู้ว่าฉันต้องการใช้แบบสอบถามสื่อเพื่อแสดงภาพที่แตกต่างกันตามความละเอียดที่แตกต่างกันสมมติว่ามีขนาดเล็กกลางและ ตัวอย่างเช่นภาพเดียวกันขนาดใหญ่ ฉันรู้ว่าคุณไม่สามารถเปลี่ยน img src ด้วย CSS ได้ดังนั้นฉันจึงคิดว่าฉันควรใช้พื้นหลัง CSS สำหรับรูปภาพแทนที่จะเป็นแท็ก img ใน HTML ดูเหมือนว่าจะทำงานไม่ถูกต้องเนื่องจาก div ที่มีภาพพื้นหลังต้องการทั้งความกว้างและความสูงเพื่อแสดงพื้นหลัง เห็นได้ชัดว่าฉันสามารถใช้ 'width: 100%' ได้ แต่ฉันจะใช้ความสูงอะไร ฉันสามารถใส่ความสูงคงที่แบบสุ่มเช่น 150px จากนั้นฉันจะเห็น 150px บนสุดของรูปภาพ แต่นี่ไม่ใช่วิธีแก้ปัญหาเนื่องจากไม่มีความสูงคงที่ ฉันเล่นและพบว่าเมื่อมีความสูงแล้ว (ทดสอบด้วย 150px) ฉันสามารถใช้ 'background-size: …

90 html css background-image responsive responsive-images

2

Base64 ข้อมูล PNG ไปยังผ้าใบ HTML5

ฉันต้องการโหลดภาพ PNG ที่เข้ารหัสใน Base64 เป็นองค์ประกอบ canvas ฉันมีรหัสนี้: <html> <head> </head> <body> <canvas id="c"></canvas> <script type="text/javascript"> var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; ctx.drawImage(data, 0, 0); </script> </body> </html> ใน Chrome 8 ฉันได้รับข้อผิดพลาด: Uncaught TypeError: Type error และใน Firebug ของ Firefox สิ่งนี้: "ประเภทของวัตถุไม่เข้ากันกับประเภทที่คาดไว้ของพารามิเตอร์ที่เกี่ยวข้องกับวัตถุ" code: "17" ใน base64 …

90 html canvas png base64

4

div คงที่ตรงกลางพร้อมความกว้างแบบไดนามิก (CSS)

ฉันมี div ที่จะมี CSS นี้: #some_kind_of_popup { position: fixed; top: 100px; min-height: 300px; width: 90%; max-width: 900px; } ตอนนี้ฉันจะทำให้ div นี้อยู่กึ่งกลางได้อย่างไร ฉันสามารถใช้margin-left: -450px; left: 50%;แต่จะใช้ได้ก็ต่อเมื่อหน้าจอมีขนาด> 900 พิกเซล หลังจากนั้น (เมื่อหน้าต่างมีขนาด <900 พิกเซล) หน้าต่างจะไม่อยู่ตรงกลางอีกต่อไป แน่นอนฉันสามารถทำสิ่งนี้กับ js บางประเภทได้ แต่มี "ถูกต้องกว่า" ในการทำเช่นนี้กับ CSS หรือไม่?

90 css html center

3

วิธีเพิ่ม new <li> ลงใน <ul> onclick ด้วย javascript

ฉันจะเพิ่มองค์ประกอบรายการใน ul ที่มีอยู่โดยใช้ฟังก์ชันจาก onclick ได้อย่างไร? ฉันต้องการมันเพื่อเพิ่มในรายการประเภทนี้ ... <ul id="list"> <li id="element1">One</li> <li id="element2">Two</li> <li id="element3">Three</li> </ul> ... รายการอื่นที่มี id "element4" และข้อความ "Four" อยู่ข้างใต้ ฉันลองใช้ฟังก์ชั่นนี้แล้วแต่ไม่ได้ผล ... function function1() { var ul = document.getElementById("list"); var li = document.createElement("li"); li.appendChild(document.createTextNode("Element 4")); } ฉันไม่รู้จัก JQuery ดังนั้นโปรดใช้ Javascript เท่านั้น ขอขอบคุณ!!

90 javascript html list

12

วิธีตั้งค่าความกว้างและความสูงของรูปภาพโดยไม่ยืดออก

ถ้าฉันมี: #logo { width: 400px; height: 200px; } แล้ว <img id="logo" src="logo.jpg"/> จะยืดออกไปจนเต็มช่องว่างนั้น ฉันต้องการให้รูปภาพมีขนาดเท่าเดิม แต่ต้องใช้พื้นที่ใน DOM มากขนาดนั้น ฉันต้องเพิ่มการห่อหุ้ม<div>หรือ<span>? ฉันเกลียดการเพิ่มมาร์กอัปสำหรับการจัดแต่งทรงผม

90 html css

6

การโหลดภาพไปยัง <img> จาก <input file>

ฉันกำลังพยายามโหลดรูปภาพที่ผู้ใช้เลือกผ่านองค์ประกอบ ฉันเพิ่มตัวจัดการเหตุการณ์ onchange ให้กับองค์ประกอบอินพุตดังนี้: <input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/> และฟังก์ชัน Preview_2 คือ: var outImage ="imagenFondo"; function preview_2(what){ globalPic = new Image(); globalPic.onload = function() { document.getElementById(outImage).src = globalPic.src; } globalPic.src=what.value; } โดยที่ outImage มีค่า id ของแท็กที่ฉันต้องการให้โหลดรูปภาพใหม่ อย่างไรก็ตามดูเหมือนว่า onload ไม่เคยเกิดขึ้นและไม่โหลดอะไรลงใน html ฉันควรทำอย่างไรดี?

90 javascript html

8

onclick เปิดหน้าต่างและขนาดเฉพาะ

ฉันมีลิงค์ดังนี้: <a href="/index2.php?option=com_jumi&amp;fileid=3&amp;Itemid=11" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,') ฉันต้องการให้หน้าต่างเปิดใหม่เปิดในขนาดที่กำหนด ฉันจะระบุความสูงและความกว้างได้อย่างไร?

90 javascript html

4

การระบุเนื้อหาของ iframe แทนแอตทริบิวต์ src ไปยังเพจ

ฉันกำลังดำเนินการกับแบบฟอร์มที่มีอินพุตไฟล์สำหรับอัปโหลดรูปภาพ มีonchange()เหตุการณ์สำหรับอินพุตเหล่านั้นที่ส่งรูปภาพไปยังiframeจากนั้นโหลดรูปภาพที่อัปโหลดลงในฟอร์มแบบไดนามิกโดยมีฟิลด์ที่จะแก้ไขสำหรับรูปภาพเหล่านั้น (เช่นชื่อและการแปลตามพื้นที่ทางภูมิศาสตร์ ) เนื่องจากฉันไม่สามารถซ้อนแบบฟอร์มได้file_inputจึงมีอยู่ในiframeไฟล์. ในท้ายที่สุดฉันใช้ไฟล์iframeภายในของอีกiframeอัน ดังนั้นฉันจึงมีสิ่งนี้: <form>  <iframe src="file_input_url">  </iframe> </form> และ HTML ที่โหลดลงในiframeนั้นเป็นสิ่งที่ต้องการ (ไม่รวมhtml,headและbodyแท็ก) <form target="upload_iframe"> <input type="file" onchange="this.form.submit()"> </form> <iframe name="upload_iframe"></iframe> วิธีนี้ใช้งานได้ดียกเว้นการโหลดครั้งแรกใช้เวลาสองถึงสามวินาทีiframeดังนั้นอินพุตไฟล์จึงไม่โหลดพร้อมกับส่วนที่เหลือของหน้า สิ่งนี้ไม่เหมาะกับสายตา ฉันสามารถแก้ไขได้ถ้าฉันสามารถระบุiframeเนื้อหาโดยไม่จำเป็นต้องโหลดหน้าอื่น (ระบุไว้file_input_urlในหน้าแรกiframe) มีวิธีระบุiframeเนื้อหาในเอกสารเดียวกันหรือไม่หรือระบุเฉพาะกับsrcแอตทริบิวต์โดยต้องโหลดหน้าอื่น

90 html iframe

6

ReactJS แสดงสตริงที่มีช่องว่างที่ไม่ทำลาย

ฉันมีอุปกรณ์ประกอบฉากบางอย่างที่มีสตริงที่อาจมีอักขระเช่น & นอกจากนี้ยังมีช่องว่าง &nbsp;ฉันต้องการที่จะแทนที่ช่องว่างทั้งหมดที่มี มีวิธีง่ายๆที่ฉันสามารถทำได้หรือไม่? โปรดทราบว่าฉันไม่สามารถแสดงผลโดยใช้ไวยากรณ์นี้ได้: <div dangerouslySetInnerHTML={{__html: myValue}} /> เพราะก่อนอื่นฉันจะต้องแทนที่เอนทิตี HTML ใด ๆ ด้วยมาร์กอัป ฉันไม่ต้องการที่จะทำเช่นนี้ดูเหมือนว่าระดับต่ำเกินไป มีวิธีที่ฉันสามารถทำได้หรือไม่?

90 html reactjs

14

รอเคอร์เซอร์เหนือหน้า html ทั้งหมด

เป็นไปได้ไหมที่จะตั้งค่าเคอร์เซอร์เป็น 'รอ' บนหน้า html ทั้งหมดด้วยวิธีง่ายๆ แนวคิดคือการแสดงให้ผู้ใช้เห็นว่ามีบางอย่างเกิดขึ้นในขณะที่การโทร ajax เสร็จสมบูรณ์ โค้ดด้านล่างแสดงเวอร์ชันที่เรียบง่ายของสิ่งที่ฉันพยายามและยังแสดงให้เห็นถึงปัญหาที่ฉันพบ: หากองค์ประกอบ (# id1) มีการตั้งค่ารูปแบบเคอร์เซอร์มันจะไม่สนใจชุดเดียวในร่างกาย (ชัดเจน) องค์ประกอบบางอย่างมีลักษณะเคอร์เซอร์เริ่มต้น (a) และจะไม่แสดงเคอร์เซอร์รอเมื่อวางเมาส์เหนือ องค์ประกอบของร่างกายมีความสูงที่แน่นอนขึ้นอยู่กับเนื้อหาและหากหน้าสั้นเคอร์เซอร์จะไม่แสดงด้านล่างส่วนท้าย การทดสอบ: <html> <head> <style type="text/css"> #id1 { background-color: #06f; cursor: pointer; } #id2 { background-color: #f60; } </style> </head> <body> <div id="id1">cursor: pointer</div> <div id="id2">no cursor</div> <a href="#" onclick="document.body.style.cursor = 'wait'; return …

89 javascript html css dynamic-css

คำถามติดแท็ก html