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

ฉันจะใช้การไล่ระดับสี CSS3 สำหรับของฉันbackground-colorแล้วนำ a background-imageไปใช้กับพื้นผิวแบบบาง ๆ ที่โปร่งใสได้อย่างไร

1250 css  background-image  gradient 

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

777 html  css  image  background-image 

ฉันดูที่แหล่งที่มาของ userscript greasemonkey และสังเกตเห็นสิ่งต่อไปนี้ใน CSS: .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} ฉันสามารถชื่นชมได้ว่าสคริปต์ greasemonkey ต้องการรวมสิ่งที่สามารถทำได้ภายในแหล่งที่มาแทนที่จะเป็นโฮสต์บนเซิร์ฟเวอร์นั่นชัดเจนเพียงพอ แต่ก่อนหน้านี้ฉันไม่เคยเห็นเทคนิคนี้เลยฉันจึงพิจารณาการใช้งานและดูเหมือนว่าจะมีเหตุผลหลายประการ: มันจะลดปริมาณของคำขอ HTTP ในการโหลดหน้าซึ่งจะช่วยเพิ่มประสิทธิภาพ หากไม่มี CDN ก็จะลดปริมาณการรับส่งข้อมูลที่สร้างขึ้นจากคุกกี้ที่ถูกส่งไปพร้อมกับรูปภาพ ไฟล์ CSS สามารถแคชได้ ไฟล์ CSS สามารถเป็น GZIPPED เมื่อพิจารณาว่า IE6 (เช่น) มีปัญหากับแคชสำหรับภาพพื้นหลังดูเหมือนว่าไม่ใช่ความคิดที่เลวร้ายที่สุด ... นี่เป็นวิธีปฏิบัติที่ดีหรือไม่ดีทำไมคุณไม่ใช้และคุณจะใช้เครื่องมือใดในการเข้ารหัสภาพที่ base64 อัพเดท - ผลการทดสอบ การทดสอบด้วยภาพ: http://fragged.org/dev/map-shot.jpg - 133.6Kb URL ทดสอบ: http://fragged.org/dev/base64.html ไฟล์ CSS เฉพาะ: http://fragged.org/dev/base64.css …

475 css  base64  background-image  data-uri 

ฉันมีไฟล์ JPEG ที่ฉันใช้เป็นภาพพื้นหลังสำหรับหน้าค้นหาและฉันใช้ CSS เพื่อตั้งค่าเพราะฉันทำงานภายในบริบทของBackbone.js : background-image: url("whatever.jpg"); ฉันต้องการที่จะใช้ตัวกรองเบลอ CSS 3 เพียงไปที่พื้นหลัง แต่ผมไม่แน่ใจว่าวิธีการรูปแบบองค์ประกอบเพียงว่าหนึ่ง ถ้าฉันลอง: -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); ใต้background-imageCSS ของฉันมันมีลักษณะทั้งหน้าไม่ใช่แค่พื้นหลัง มีวิธีเลือกเฉพาะภาพและใช้ตัวกรองกับสิ่งนั้นหรือไม่? อีกวิธีหนึ่งมีวิธีเพียงปิดเบลอสำหรับองค์ประกอบอื่น ๆ ในหน้าหรือไม่

467 css  background-image  css-filters 

ฉันมีภาพพื้นหลังใน div ต่อไปนี้ แต่ภาพถูกตัดออก: <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center"> มีวิธีแสดงภาพพื้นหลังโดยไม่ตัดออกหรือไม่?

334 html  css  background-image 

ฉันต้องการแสดงรูปภาพจาก URL ที่มีความกว้างและความสูงแม้ว่ามันจะมีอัตราส่วนขนาดที่แตกต่างกัน ดังนั้นฉันต้องการปรับขนาด (รักษาอัตราส่วน) แล้วตัดภาพให้มีขนาดที่ฉันต้องการ ฉันสามารถปรับขนาดด้วยimgคุณสมบัติhtml และสามารถตัดbackground-imageได้ ฉันจะทำทั้งสองอย่างได้อย่างไร ตัวอย่าง: ภาพนี้: มี800x600พิกเซลขนาดและฉันต้องการแสดงเช่นภาพ200x100พิกเซล ด้วยimgฉันสามารถปรับขนาดภาพ200x150px: <img style="width: 200px; height: 150px;" src="http://i.stack.imgur.com/wPh0S.jpg"> ที่ให้ฉันนี้: <img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg"> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล และด้วยbackground-imageฉันสามารถตัดภาพ200x100พิกเซล <div style="background-image: url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div> ให้ฉัน: <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันจะทำทั้งสองอย่างได้อย่างไร ปรับขนาดภาพแล้วตัดตามขนาดที่ฉันต้องการหรือไม่

333 html  css  background-image  image 

เป็นไปได้หรือไม่ที่จะมีภาพพื้นหลังสองภาพ? ตัวอย่างเช่นฉันต้องการให้ทำซ้ำภาพหนึ่งภาพที่ด้านบน (ซ้ำ -x) และอีกหนึ่งภาพที่ทำซ้ำทั่วทั้งหน้า (ซ้ำ) โดยที่อีกภาพหนึ่งอยู่ด้านหลังของหน้าซึ่งอยู่ด้านบนสุด ฉันพบว่าฉันสามารถบรรลุเอฟเฟ็กต์ที่ต้องการสำหรับภาพพื้นหลังสองภาพโดยการตั้งค่าพื้นหลังของ html และเนื้อหา: html { background: url(images/bg.png); } body { background: url(images/bgtop.png) repeat-x; } CSS นี้ "ดี" หรือไม่ มีวิธีที่ดีกว่านี้ไหม? แล้วถ้าฉันต้องการภาพพื้นหลังสามภาพขึ้นไปล่ะ?

316 css  background-image 

ฉันมี DIV และฉันต้องการที่จะนำรูปแบบเป็นพื้นหลัง ลวดลายนี้เป็นสีเทา ดังนั้นเพื่อให้ดีขึ้นอีกเล็กน้อยฉันต้องการวาง "เลเยอร์" สีโปร่งใสแบบเบา ๆ ด้านล่างเป็นสิ่งที่ฉันพยายาม แต่ไม่ได้ผล มีวิธีวางเลเยอร์สีเหนือภาพพื้นหลังหรือไม่? นี่คือ CSS ของฉัน: background: url('../img/bg/diagonalnoise.png'); background-color: rgba(248, 247, 216, 0.7);

213 css  background-image  background-color 

ฉันมีเว็บไซต์ (g-floors.eu) และฉันต้องการสร้างพื้นหลัง (ใน css ฉันได้กำหนด bg-image สำหรับเนื้อหา) เช่นกัน น่าเสียดายที่ฉันไม่มีความคิดเกี่ยวกับวิธีการทำสิ่งนี้ยกเว้นสิ่งหนึ่งที่ฉันสามารถคิดได้ แต่มันก็เป็นวิธีแก้ปัญหา การสร้างภาพหลายภาพจากนั้นใช้ขนาดหน้าจอ css เพื่อเปลี่ยนภาพ แต่ฉันอยากรู้ว่ามีวิธีการปฏิบัติมากขึ้นเพื่อให้บรรลุนี้ โดยทั่วไปสิ่งที่ฉันต้องการบรรลุคือภาพ (พร้อมลายน้ำ 'G') จะปรับขนาดโดยอัตโนมัติโดยไม่แสดงภาพน้อยลง ถ้าเป็นไปได้แน่นอน ลิงก์: g-floors.eu รหัสที่ฉันมีจนถึงตอนนี้ (ส่วนเนื้อหา) #content { background-image: url('../images/bg.png'); background-repeat: no-repeat; position: relative; width: 85%; height: 610px; margin-left: auto; margin-right: auto; }

197 css  responsive-design  background-image  image-resizing 

ฉันมีแผงที่ฉันมีสีฟ้าถ้าแผงนี้จะถูกเลือก (คลิกที่มัน) นอกจากนี้ฉันเพิ่มสัญญาณขนาดเล็ก ( .pngภาพ) ลงในแผงควบคุมซึ่งระบุว่าแผงที่เลือกได้ถูกเลือกไว้ก่อนหน้า ดังนั้นหากผู้ใช้เห็นตัวอย่าง 10 พาเนลและ 4 ในนั้นมีเครื่องหมายขนาดเล็กนี้เขารู้ว่าเขาได้คลิกบนพาเนลเหล่านั้นมาก่อน ใช้งานได้ดีจนถึงตอนนี้ ปัญหาคือตอนนี้ฉันไม่สามารถแสดงสัญญาณขนาดเล็กและทำให้แผงสีฟ้าในเวลาเดียวกัน ผมตั้งแผงสีฟ้าที่มี CSS และภาพพื้นหลังด้วยbackground: #6DB3F2; background-image: url('images/checked.png')แต่ดูเหมือนว่าสีพื้นหลังจะอยู่เหนือภาพดังนั้นคุณจึงไม่เห็นเครื่องหมาย เป็นไปได้ไหมที่จะตั้งค่าz-indexes สำหรับสีพื้นหลังและภาพพื้นหลัง?

169 css  background  background-image  background-color 

เป็นไปได้ไหมที่จะตั้งค่าองค์ประกอบbackground-imageSVG<path> ตัวอย่างเช่นถ้าฉันตั้งองค์ประกอบclass="wall"สไตล์ CSS จะใช้.wall {fill: red;}งานได้ แต่.wall{background-image: url(wall.jpg)}จะไม่เป็นเช่น.wall {background-color: red;}นั้น

166 html  css  image  svg  background-image 

ฉันต้องการหมุนภาพที่วางไว้ในปุ่มแถบเลื่อนใน Chrome ตอนนี้ฉันมี CSS พร้อมเนื้อหานี้: ::-webkit-scrollbar-button:vertical:decrement { background-image:url(images/arrowup.png) ; -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); background-repeat:no-repeat; background-position:center; background-color:#ECEEEF; border-color:#999; } ฉันต้องการหมุนภาพโดยไม่หมุนเนื้อหา

160 css  background-image  image-rotation 

เป้าหมายของฉันคือการสร้างหน้า HTML ที่คล้ายกับ "กรอบรูป" กล่าวอีกนัยหนึ่งฉันต้องการทำหน้าว่างที่ล้อมรอบด้วย 4 รูปภาพ นี่คือรหัสของฉัน: <table> <tr> <td class="bTop" colspan="3"> </td> </tr> <tr> <td class="bLeft"> </td> <td class="middle"> </td> <td class="bRight"> </td> </tr> <tr> <td class="bBottom" colspan="3"> </td> </tr> </table> และคลาส CSS มีดังต่อไปนี้: .bTop { width: 960px; height: 111px; background-image: url('../Images/BackTop.jpg'); } .bLeft { width: 212px; height: …

141 html  css  html-table  background-image 

ฉันกำลังพยายามสร้างเอฟเฟกต์ "จางหายไป" โดยใช้การเปลี่ยน CSS แต่ฉันไม่สามารถใช้งานกับภาพพื้นหลังได้ ... CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSITION */ -webkit-transition: background 1s; …

122 css  background  background-image  css-transitions 

ฉันกำลังพยายามสร้างปุ่มด้วยตัวเลือกปุ่มของฉันสามารถมีสถานะดังต่อไปนี้: เปิดใช้งาน / ปิดใช้งาน กด / ไม่กด ตามรัฐดังกล่าวข้างต้น. ฉันต้องการจัดการปุ่มของ: สีข้อความ ภาพพื้นหลัง ปุ่มเริ่มต้นจากการที่ฉันปิดใช้งานดังนั้นควรมี textColor ที่ปิดใช้งานและพื้นหลังปุ่มปิดใช้ แต่ฉันสามารถเห็น textColor เริ่มต้น (ระบุในรูปแบบ) และไม่มีภาพพื้นหลัง! นี่คือ button_selector.xml ตัวเลือกของฉัน <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="false" android:state_enabled="false" android:textColor="#9D9FA2" android:drawable="@drawable/button" /> <item android:state_pressed="true" android:state_enabled="true" android:drawable="@drawable/button_pressed"/> <item android:state_pressed="true" android:state_enabled="false" android:textColor="#9D9FA2" android:drawable="@drawable/button"/> <item android:state_pressed="false" android:state_enabled="true" android:drawable="@drawable/button"/> </selector> และนี่คือการประกาศปุ่มของฉันใน layout.xml ของฉัน …

104 android  xml  button  selector  background-image