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

ฉันกำลังดิ้นรนกับการตั้งค่า libsass เนื่องจากมันไม่ตรงไปตรงมาเหมือนกับ Transpiler ที่ใช้ Ruby ใครช่วยอธิบายวิธีการ: ติดตั้ง libsass? ใช้จากบรรทัดคำสั่ง? ใช้กับงานวิ่งอย่างอึกและฮึดฮัด? ฉันมีประสบการณ์เพียงเล็กน้อยกับผู้จัดการแพ็คเกจและแม้แต่น้อยกว่ากับนักวิ่งงาน

93 css  sass  gulp-sass  node-sass  libsass 

ฉันกำลังพยายามสร้าง div แบบกึ่งโปร่งใสครอบคลุมทั้งหน้าจอ ฉันลองสิ่งนี้: #dimScreen { width: 100%; height: 100%; background:rgba(255,255,255,0.5); } แต่ไม่ได้ครอบคลุมทั้งหน้าจอ แต่จะครอบคลุมเฉพาะพื้นที่ภายใน div

93 css 

ฉันพยายามผูก src ของรูปภาพในองค์ประกอบ แต่ดูเหมือนจะไม่ได้ผล ฉันได้รับ "นิพจน์ไม่ถูกต้อง Generated function body: {backgroundImage: {url (image)}" เอกสารกล่าวว่าจะใช้อย่างใดอย่างหนึ่ง 'Kebab กรณี' หรือ 'อูฐกรณี' <div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div> นี่คือซอ: https://jsfiddle.net/0dw9923f/2/

93 javascript  html  css  vue.js 

นี่คือภาพประกอบของปัญหา (ทดสอบใน Firefox และ Chrome): <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ดูบน JSFiddle ขอให้สังเกตเพิ่มredพื้นที่ภายในด้านล่างสีฟ้าdivsvg ลองตั้งค่าpaddingและmarginองค์ประกอบทั้งสองเป็น0แล้ว แต่ไม่มีโชค

93 html  css  svg 

ฉันมีตู้คอนเทนเนอร์ที่มีดิ้นสองรายการ ฉันต้องการตั้งค่าระยะขอบบนเส้นที่สอง แต่เฉพาะเมื่อมันถูกพันและไม่อยู่ที่เส้นโค้งแรก ถ้าเป็นไปได้ฉันต้องการหลีกเลี่ยงการใช้แบบสอบถามสื่อ ฉันคิดว่าขอบล่างขององค์ประกอบแรกอาจเป็นวิธีแก้ปัญหา อย่างไรก็ตามมันจะเพิ่มช่องว่างที่ด้านล่างเมื่อองค์ประกอบไม่ได้ถูกรวมเข้าด้วยกันปัญหาเดียวกัน นี่คือรหัสของฉัน: .container { display: flex; flex-wrap: wrap; justify-content: space-around; } .item-big { background: blue; width: 300px; } .item-small { background: red; margin-top: 30px; } <div class="container"> <div class="item-big"> FIRST BIG ELEM </div> <div class="item-small"> SECOND SMALL ELEM </div> </div> เรียกใช้ข้อมูลโค้ดHide resultsขยายข้อมูลโค้ด

93 css  margin  flexbox 

ฉันต้องการใช้แบบอักษรเดียวชื่อ "แอลจีเรีย" ทั่วทั้งเว็บไซต์ของฉัน ดังนั้นฉันต้องเปลี่ยนแท็ก HTML ทั้งหมดและฉันไม่ต้องการเขียนโค้ดที่แตกต่างกันสำหรับแท็กต่างๆเช่น: button{font-family:Algerian;} div{font-family:Algerian;} วิธีการที่เขียนด้านล่างนี้เป็นสิ่งที่ไม่ควรทำ: div,button,span,strong{font-family:Algerian;}

92 html  css  fonts  font-face 

ฉันมีรหัสนี้: <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> <li>Text 12</li> </ul> …

92 html  css  twitter-bootstrap  twitter-bootstrap-3  responsive-design 

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

92 javascript  css  frontend 

ดูเหมือนจะมีปัญหากับหน้าของฉันที่นี่: http://www.lonewulf.eu เมื่อวางเมาส์เหนือภาพขนาดย่อรูปภาพจะเลื่อนไปทางขวาเล็กน้อยและจะเกิดขึ้นใน Chrome เท่านั้น css ของฉัน: .img{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; display:block; border:1px solid #121212; } .img:hover{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; -khtml-opacity: 1; display:block; }

92 css  image  google-chrome  hover  opacity 

เป็นไปได้หรือไม่ที่จะทำให้การนำทางในแถบด้านข้างคงที่เสมอเมื่อเลื่อนในรูปแบบของเหลว

92 css  twitter-bootstrap  css-position  fluid-layout 

นี่คือปัญหา ฉันมีภาพ: <img alt="alttext" src="filename.jpg"/> หมายเหตุไม่ได้ระบุความสูงหรือความกว้าง ในบางหน้าฉันต้องการแสดงเฉพาะภาพขนาดย่อ ฉันไม่สามารถแก้ไข html ได้ดังนั้นฉันจึงใช้ CSS ต่อไปนี้: .blog_list div.postbody img { width:75px; } ซึ่ง (ในเบราว์เซอร์ส่วนใหญ่) จะสร้างหน้าของภาพขนาดย่อที่มีความกว้างเท่ากันทั้งหมดนี้มีอัตราส่วนภาพที่คงไว้ แม้ว่าใน IE6 รูปภาพจะถูกปรับขนาดตามขนาดที่ระบุใน CSS เท่านั้น ยังคงความสูงตามธรรมชาติ นี่คือตัวอย่างของหน้าคู่ที่แสดงปัญหา: รายการซึ่งควรแสดงภาพขนาดย่อ บล็อกโพสต์เดียวซึ่งแสดงภาพขนาดเต็ม ฉันรู้สึกขอบคุณมากสำหรับคำแนะนำทั้งหมด แต่อยากจะชี้ให้เห็นว่า (เนื่องจากข้อ จำกัด ของแพลตฟอร์มที่ลูกค้าเลือก) ฉันกำลังมองหาสิ่งที่ไม่เกี่ยวข้องกับการแก้ไข html CSS ก็นิยมใช้กับจาวาสคริปต์เช่นกัน แก้ไข: ควรระบุว่ารูปภาพมีขนาดและอัตราส่วนต่างกัน

92 javascript  css  internet-explorer  image  internet-explorer-6 

นี่คือสิ่งที่ฉันมี Fiddle ul { display: flex; justify-content: flex-start; flex-direction: row; align-items: center; width: 100%; height: 100px; background: #333; padding: 15px; } ul li { padding: 15px; margin: 5px; background: #efefef; border: 1px solid #ccc; display: inline-block; list-style: none; } #item-1 { height: 50px; } #item-2 { height: 70px; } <ul> …

92 html  css 

มีวิธีควบคุมขนาดของปุ่มตัวเลือกใน CSS หรือไม่?

92 html  css  radio-button 

Наэтотвопросестьответына Stack Overflow нарусском : Прозрачныйтекствырезанизфона มีวิธีใดบ้างในการตัดข้อความโปร่งใสออกจากเอฟเฟกต์พื้นหลังเช่นเดียวกับในภาพต่อไปนี้ด้วย CSS คงเป็นเรื่องน่าเศร้าที่ต้องสูญเสีย SEO อันมีค่าทั้งหมดไปเพราะรูปภาพแทนที่ข้อความ ตอนแรกฉันนึกถึงเงา แต่คิดอะไรไม่ออก ... รูปภาพเป็นพื้นหลังของไซต์ซึ่งเป็น<img>แท็กที่อยู่ในตำแหน่งที่แน่นอน

92 css  svg  fonts  css-shapes 

ฉันได้สร้างองค์ประกอบ DOM ที่ค่อนข้างซับซ้อนโดยมี an: after pseudo-element และฉันต้องการตรวจสอบและปรับแต่งองค์ประกอบเหล่านี้ใน Chrome Inspector หรือ Firebug หรือเทียบเท่า แม้จะมีการกล่าวถึงคุณลักษณะนี้ในบล็อกโพสต์ WebKit / Safari (ลงวันที่ 2010) แต่ฉันไม่พบคุณลักษณะนี้เลยใน Chrome หรือ Safari อย่างน้อย Chrome ก็มีช่องทำเครื่องหมายเพื่อตรวจสอบ: hover,: เยี่ยมและ: สถานะที่ใช้งานอยู่ แต่: before and: after จะไม่มีให้เห็น นอกจากนี้บล็อกโพสต์นี้ (ลงวันที่ 2009!) กล่าวถึงความสามารถนี้ที่มีอยู่ในเครื่องมือ IE dev แต่ตอนนี้ฉันใช้ Mac OS ดังนั้นนี่จึงไม่ช่วยฉัน นอกจากนี้ IE ไม่ใช่เบราว์เซอร์ที่ฉันกำหนดเป้าหมายเป็นหลัก มีวิธีใดในการตรวจสอบองค์ประกอบหลอกเหล่านี้หรือไม่? แก้ไข: นอกเหนือจากความผิดพลาดเกี่ยวกับ Firebug …

92 css  firefox  google-chrome  firebug  google-chrome-devtools