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

ฉันมีไฟล์ 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 

คำถามของฉัน: กำหนดสี RGB เป้าหมายสิ่งที่เป็นสูตรการเปลี่ยนสีสีดำ ( #000) เป็นสีที่ใช้เพียงฟิลเตอร์ CSS ? เพื่อให้ได้รับคำตอบจะต้องมีฟังก์ชัน (ในภาษาใดก็ได้) ที่จะยอมรับสีเป้าหมายเป็นอาร์กิวเมนต์และส่งคืนfilterสตริงCSS ที่เกี่ยวข้อง บริบทนี้คือความจำเป็นในการเปลี่ยนสี SVG ภายในไฟล์background-image. ในกรณีนี้ก็คือการสนับสนุนคุณสมบัติคณิตศาสตร์เท็กซ์บางอย่างใน KaTeX: https://github.com/Khan/KaTeX/issues/587 ตัวอย่าง หากสีเป้าหมายเป็น#ffff00(สีเหลือง) วิธีแก้ไขปัญหาที่ถูกต้องคือ: filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg) ( สาธิต ) ที่ไม่ใช่เป้าหมาย นิเมชั่น โซลูชันที่ไม่ใช่ตัวกรอง CSS เริ่มจากสีอื่นที่ไม่ใช่สีดำ การดูแลเกี่ยวกับสิ่งที่เกิดขึ้นกับสีอื่นที่ไม่ใช่สีดำ ผลลัพธ์จนถึงตอนนี้ การค้นหาพารามิเตอร์ของรายการตัวกรองแบบคงที่: https://stackoverflow.com/a/43959856/181228 จุด ด้อย: ไม่มีประสิทธิภาพสร้างสีที่เป็นไปได้เพียง 16,777,216 สี (676,248 กับhueRotateStep=1) โซลูชันการค้นหาที่เร็วขึ้นโดยใช้SPSA : https://stackoverflow.com/a/43960991/181228 ได้รับรางวัล …

117 javascript  css  math  algebra  css-filters 

ฉันมีปัญหาในการใช้เอฟเฟกต์เบลอใน div ภาพซ้อนทับแบบกึ่งโปร่งใส ฉันต้องการให้ทุกอย่างที่อยู่เบื้องหลัง div เบลอเช่นนี้: นี่คือ jsfiddle ที่ใช้ไม่ได้: http://jsfiddle.net/u2y2091z/ มีความคิดอย่างไรในการทำงานนี้? ฉันต้องการให้สิ่งนี้ไม่ซับซ้อนที่สุดเท่าที่จะเป็นไปได้และกำหนดให้เป็นข้ามเบราว์เซอร์ นี่คือ CSS ที่ฉันใช้: #overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background:black; background:rgba(0,0,0,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); }

110 html  css  blur  css-filters