คำถามติดแท็ก background-image

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

102 css  printing  background-image 

ฉันต้องการตั้งค่าภาพพื้นหลังเป็น div ต่างๆ แต่ปัญหาของฉันคือ: ขนาดของภาพคงที่ (60px) ขนาดของ div ที่แตกต่างกันไป ฉันจะยืดภาพพื้นหลังให้เต็มพื้นหลังทั้งหมดของ div ได้อย่างไร #div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png); height:180px; width:200px; border: 1px solid red; } ตรวจสอบรหัสที่นี่

102 css  html  background  background-image 

ฉันมีส่วนขยาย Chrome แบบธรรมดาที่ใช้คุณลักษณะสคริปต์เนื้อหาเพื่อแก้ไขเว็บไซต์ โดยเฉพาะอย่างยิ่งbackground-imageของเว็บไซต์ดังกล่าว ด้วยเหตุผลบางอย่างดูเหมือนว่าฉันไม่สามารถใช้รูปภาพในเครื่องได้แม้ว่าจะบรรจุในส่วนขยายแล้วก็ตาม body { background: #000 url('image.jpg') !important; background-repeat: repeat !important; } แค่นั้นแหละ CSS ที่ง่ายที่สุด ... แต่มันใช้ไม่ได้ เบราว์เซอร์ไม่โหลดภาพ

99 css  google-chrome-extension  background-image 

imgด้วยsrcsetแอตทริบิวต์ดูเหมือนเป็นวิธีที่ยอดเยี่ยมในการทำรูปภาพที่ตอบสนอง มีไวยากรณ์เทียบเท่าที่ทำงานในbackground-imageคุณสมบัติcss หรือไม่ HTML <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"> CSS .mycontainer { background: url(?something goes here?); }

91 html  css  background-image  srcset 

ฉันกำลังพยายามหาภาพพื้นหลังขององค์ประกอบ 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 

ฉันกำลังทำงานกับหน้า 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 

สมมติว่าฉันมี <div class="myDiv">Hi there</div> ฉันต้องการที่จะนำbackground-imageและให้มันopacityของ0.5- แต่ฉันต้องการว่าข้อความที่ผมได้เขียนจะมีความทึบแสงเต็มรูปแบบ ( 1) ถ้าจะเขียน CSS แบบนี้ .myDiv { opacity:0.5 } ทุกอย่างจะมีความทึบต่ำ - และฉันไม่ต้องการอย่างนั้น คำถามของฉันคือ - ฉันจะรับภาพพื้นหลังที่มีความทึบต่ำพร้อมข้อความทึบแสงได้อย่างไร?

89 html  css  background  background-image 

ฉันมีปุ่มซึ่งเมื่อฉันคลิกฉันต้องการที่จะแจ้งเตือนbackground-imageURL #div1ของ เป็นไปได้ไหม?

89 jquery  url  html  background-image