ดูเหมือนว่าการซ้อนทับของ Apple เป็นมากกว่าความโปร่งใส มีความคิดเห็นเกี่ยวกับวิธีการบรรลุผลนี้ด้วย CSS และอาจเป็นไปได้ JS?
ดูเหมือนว่าการซ้อนทับของ Apple เป็นมากกว่าความโปร่งใส มีความคิดเห็นเกี่ยวกับวิธีการบรรลุผลนี้ด้วย CSS และอาจเป็นไปได้ JS?
คำตอบ:
เป็นไปได้ด้วย CSS3:
#myDiv {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;
}
ตัวอย่างที่นี่ => jsfiddle
-moz-filter: blur()
พวกเขาไม่ได้รับการสนับสนุน คุณต้องใช้ตัวกรอง SVG แทนดูคำตอบของฉันสำหรับรายละเอียด
http://codepen.io/Edo_B/pen/cLbrt
โดยใช้:
แค่นั้นแหละ.
ฉันยังเชื่อว่าสิ่งนี้สามารถทำได้แบบไดนามิกสำหรับหน้าจอใด ๆ หากใช้ Canvas เพื่อคัดลอก Dom ปัจจุบันและเบลอมัน
[แก้ไข] ในอนาคต (มือถือ) Safari 9 จะมี-webkit-backdrop-filter
สิ่งนี้อย่างแน่นอน ดูนี่สิปากกาฉันทำเพื่อแสดงมัน
ฉันคิดถึงเรื่องนี้ในช่วง 4 สัปดาห์ที่ผ่านมาและคิดวิธีแก้ปัญหานี้
[แก้ไข] ฉันเขียนบทความเชิงลึกเกี่ยวกับCSS-Tricks
เทคนิคนี้ใช้CSS พื้นที่ดังนั้นการสนับสนุนเบราว์เซอร์ไม่ดีที่สุดในขณะนี้ ( http://caniuse.com/#feat=css-regions )
ส่วนสำคัญของเทคนิคนี้คือการแยกเนื้อหาออกจากเค้าโครงโดยใช้ CSS Region ก่อนกำหนด.content
องค์ประกอบด้วยflow-into:content
แล้วใช้โครงสร้างที่เหมาะสมเพื่อเบลอส่วนหัว
โครงสร้างเค้าโครง:
<div class="phone">
<div class="phone__display">
<div class="header">
<div class="header__text">Header</div>
<div class="header__background"></div>
</div>
<div class="phone__content">
</div>
</div>
</div>
สองส่วนที่สำคัญของเค้าโครงนี้คือ.header__background
และ.phone__content
- เหล่านี้เป็นภาชนะที่เนื้อหาจะไหลแม้ว่า
การใช้พื้นที่ CSS มันง่ายเหมือนflow-from:content
( .content
ไหลเข้าสู่ภูมิภาคที่มีชื่อcontent
)
ตอนนี้ส่วนที่ยุ่งยากมา เราต้องการไหลเนื้อหาผ่าน.header__background
เพราะนั่นคือส่วนที่เนื้อหาจะถูก blured (ใช้webkit-filter:blur(10px);
)
นี้จะกระทำโดยเพื่อให้มั่นใจว่าเนื้อหาที่จะไหลแม้ว่า การแปลงนี้จะซ่อนเนื้อหาบางส่วนไว้ใต้ส่วนหัวเสมอ แก้ไขสิ่งนี้ได้อย่างง่ายดายเพิ่มtransfrom:translateY(-$HeightOfTheHeader)
.content
.header__background
.header__background:before{
display:inline-block;
content:'';
height:$HeightOfTheHEader
}
เพื่อรองรับการเปลี่ยนแปลง
ปัจจุบันทำงานใน:
ลักษณะนี้เป็นไปได้ด้วย FireFox ในตอนนี้ด้วยคุณลักษณะสไตล์องค์ประกอบ
แอตทริบิวต์การทดลองนี้ให้คุณใช้เนื้อหา HTML เป็นภาพพื้นหลังได้ ดังนั้นในการสร้างพื้นหลังคุณต้องมีการวางซ้อนสามส่วน:
-moz-element
พื้นหลังที่กำหนดเนื้อหา โปรดทราบว่า FX ไม่รองรับfilter: blur()
แอตทริบิวต์ดังนั้นเราจึงจำเป็นต้องใช้ SVGดังนั้นใส่กัน:
ตัวกรองเบลอ SVG (ทำงานใน FX เบราว์เซอร์อื่นสามารถใช้filter:blur()
):
<svg>
<defs>
<filter id="svgBlur">
<feGaussianBlur stdDeviation="10"/>
</filter>
</defs>
</svg>
CSS สไตล์เบลอ:
.behind-blur
{
filter : url(#svgBlur);
opacity: .4;
background: -moz-element(#content);
background-repeat: no-repeat;
}
ในที่สุด 3 ชั้น:
<div class="header" style="background-color: #fff"> </div>
<div class="header behind-blur"> </div>
<div class="header">
Header Text, content blurs behind
</div>
จากนั้นหากต้องการย้ายสิ่งนี้ไปรอบ ๆ เพียงตั้งค่าbackground-position
(ตัวอย่างใน jQuery แต่คุณสามารถใช้อะไรก็ได้):
$('.behind-blur').css({
'background-position': '-' + left + 'px -' + top + 'px'
});
ลองชมหน้าตัวอย่างนี้
การสาธิตนี้ใช้ html2canvas สำหรับการแสดงเอกสารเป็นรูปภาพ
http://blurpopup.labs.daum.net/
ปากกานี้ฉันพบว่าเมื่อวันก่อนดูเหมือนจะทำได้อย่างสวยงามเพียงแค่ css และจาวาสคริปต์ 21 บรรทัด ฉันไม่เคยได้ยินคำสั่ง cloneNode js จนกระทั่งพบสิ่งนี้ แต่มันใช้ได้ผลกับสิ่งที่ฉันต้องการอย่างแน่นอน
http://codepen.io/rikschennink/pen/zvcgx
รายละเอียด: A. โดยทั่วไปแล้วมันจะดูเนื้อหาของคุณ div และเรียกใช้ cloneNode ในนั้นมันจะสร้างสิ่งที่ซ้ำกันซึ่งมันจะวางอยู่ข้างในโอเวอร์โฟลว์: วัตถุส่วนหัวที่ซ่อนอยู่นั่งอยู่ด้านบนของหน้า B. จากนั้นมันเพียงฟังการเลื่อนเพื่อให้ภาพทั้งคู่ดูเหมือนและเบลอภาพส่วนหัว ... และ Ann BAM ผลสำเร็จ
ไม่ค่อยสามารถใช้งาน CSS ได้อย่างเต็มที่จนกว่าพวกเขาจะได้ความสามารถในการสคริปต์ที่สร้างขึ้นในภาษา
ตัวอย่างอยู่ที่นี่:
ได้ทำการสาธิตอย่างรวดเร็วเมื่อวานนี้ว่าสิ่งที่คุณพูดถึง http://bit.ly/10clOM9 การสาธิตนี้ทำพารัลแลกซ์ตามมาตรความเร่งดังนั้นมันจึงทำงานได้ดีที่สุดใน iPhone โดยทั่วไปฉันเพียงแค่คัดลอกเนื้อหาที่เราวางทับไว้ในองค์ประกอบตำแหน่งคงที่ที่ทำให้เบลอ
หมายเหตุ: ปัดขึ้นเพื่อดูแผง
(ฉันใช้ css id ที่น่ากลัว แต่คุณได้ความคิด)
#frost{
position: fixed;
bottom: 0;
left:0;
width: 100%;
height: 100px;
overflow: hidden;
-webkit-transition: all .5s;
}
#background2{
-webkit-filter: blur(15px) brightness(.2);
}
#content2fixed{
position: fixed;
bottom: 9px;
left: 9px;
-webkit-filter: blur(10px);
}
ไม่แน่ใจอย่างนั้นฉันเชื่อว่า CSS ไม่สามารถทำสิ่งนี้ได้ในขณะนี้
อย่างไรก็ตาม Chris Coyier บล็อกเกี่ยวกับเทคนิคเก่าที่มีหลายภาพเพื่อให้ได้เอฟเฟกต์ดังกล่าวhttp://css-tricks.com/blurry-background-effect/
ตรวจสอบสิ่งนี้ออกhttp://codepen.io/GianlucaGuarini/pen/Hzrhf ดูเหมือนว่ามันจะมีผลโดยไม่ต้องทำซ้ำภาพพื้นหลังขององค์ประกอบภายใต้ตัวเอง ดูข้อความที่เบลอในตัวอย่าง
Vague.js
var vague = $blurred.find('iframe').Vague({
intensity:5 //blur intensity
});
vague.blur();
ณ วันนี้11 เมษายน 2020เป็นไปได้อย่างง่ายดายด้วยbackdrop-filter
คุณสมบัติ CSS ซึ่งตอนนี้เป็นคุณลักษณะที่เสถียรใน Chrome, Safari & Edge
ฉันต้องการสิ่งนี้ในแอพมือถือไฮบริดของเราดังนั้นจึงมีใน Android / Chrome Webview & Safari WebView
เพียงเพิ่มคุณสมบัติ CSS:
.my-class {
backdrop-filter: blur(30px);
background: transparent; // Make sure there is not backgorund
}
ดูว่าใช้งานได้กับปากกานี้หรือลองตัวอย่าง:
#main-wrapper {
width: 300px;
height: 300px;
background: url("https://i.picsum.photos/id/1001/500/500.jpg") no-repeat center;
background-size: cover;
position: relative;
overflow: hidden;
}
.my-effect {
position: absolute;
top: 300px;
left: 0;
width: 100%;
height: 100%;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
color: black;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
transition: top 700ms;
}
#main-wrapper:hover .my-effect {
top: 0;
}
<h4>Hover over the image to see the effect</h4>
<div id="main-wrapper">
<div class="my-effect">
Glossy effect worked!
</div>
</div>
ลองมาตัวอย่างของแอป McDonald เพราะมันมีสีสันมาก ฉันถ่ายภาพหน้าจอและเพิ่มเป็นพื้นหลังในbody
แอพของฉัน
ฉันต้องการแสดงข้อความด้านบนด้วยเอฟเฟกต์มันวาว backdrop-filter: blur(20px);
เมื่อใช้การซ้อนทับด้านบนฉันสามารถเห็นสิ่งนี้: 😍
backdrop-filter
ยังคงไม่ทำงานโดยอัตโนมัติใน Firefox แม้ว่า ฉันสงสัยว่าผู้ใช้จะเปิดตัวเลือกเพื่อเปิดใช้งานbackdrop-filter
โดยเจตนาเพียงเพื่อดูผลกระทบนี้
ฉันใช้ตัวกรอง svg เพื่อให้ได้เอฟเฟกต์ที่คล้ายกันสำหรับสไปรต์
<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
<filter id="greyscale">
<feColorMatrix type="saturate" values="0"/>
</filter>
<image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>
<feGaussianBlur stdDeviation="10"/>
ตัวอย่างของ Keith<image ...>
แท็กเพื่อนำไปใช้กับภาพใด ๆ หรือแม้กระทั่งใช้หลายภาพสิ่งนี้อาจช่วยคุณได้ !!
สิ่งนี้จะเปลี่ยนพื้นหลังแบบไดนามิกที่ IOS ทำได้
.myBox {
width: 750px;
height: 500px;
border: rgba(0, 0, 0, 0.5) 1px solid;
background-color: #ffffff;
}
.blurBg {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.blurBg img {
-webkit-filter: blur(50px);
margin-top: -150px;
margin-left: -150px;
width: 150%;
opacity: 0.6;
}
นี่คือสิ่งที่ฉันใช้กับ jQuery การแก้ปัญหาไม่ได้เป็นสากลหมายความว่าเราต้องปรับเปลี่ยนตำแหน่งและบางอย่างขึ้นอยู่กับการออกแบบจริง
โดยพื้นฐานแล้วสิ่งที่ฉันทำคือ: เมื่อทริกเกอร์โคลน / ลบพื้นหลังทั้งหมด (สิ่งที่ควรทำให้เบลอ) ไปยังคอนเทนเนอร์ที่มีเนื้อหาที่ไม่เบลอ ข้อแม้คือว่าในการปรับขนาดหน้าต่างเบลอเบลอ div จะไม่ตรงกับต้นฉบับในแง่ของตำแหน่ง แต่อาจแก้ไขได้ด้วยฟังก์ชั่นปรับขนาดบนหน้าต่าง (จริง ๆ แล้วตอนนี้ฉันไม่สามารถรบกวนได้)
ฉันขอขอบคุณความคิดเห็นของคุณเกี่ยวกับวิธีนี้!
ขอบคุณ
นี่คือซอที่ไม่ได้ทดสอบใน IE
HTML
<div class="slide-up">
<div class="slide-wrapper">
<div class="slide-background"></div>
<div class="blured"></div>
<div class="slide-content">
<h2>Pop up title</h2>
<p>Pretty neat!</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<h1>Some title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
CSS
body {
margin: 0;
padding: 0;
font-family:'Verdana', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}
jQuery
// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);
$('.trigger').click(function () {
if ($(this).hasClass('triggered')) { // sliding up
$('.blured').animate({
height: '0px',
background: background
}, 1000, function () {
$('.blured .wrapper').remove();
});
$('.slide-up').slideUp(700);
$(this).removeClass('triggered');
} else { // sliding down
$('.wrapper').clone().appendTo('.blured');
$('.slide-up').slideDown(1000);
$offset = $('.slide-wrapper').offset();
$('.blured').animate({
height: $offset.top + height + slide_top + 'px'
}, 700);
$('.blured .wrapper').animate({
left: -$offset.left,
top: -$offset.top
}, 100);
$(this).addClass('triggered');
}
});