Làm cách nào để tạo hiệu ứng kính / mờ CSS hoạt động cho lớp phủ?

Tôi gặp sự cố khi áp dụng hiệu ứng mờ trên div lớp phủ bán trong suốt. Tôi muốn mọi thứ đằng sau div được làm mờ, như thế này:

Đây là một jsfiddle không hoạt động: http://jsfiddle.net/u2y2091z/

Bất kỳ ý tưởng làm thế nào để làm cho điều này hoạt động? Tôi muốn giữ cho điều này không phức tạp nhất có thể và để nó được trình duyệt chéo. Đây là CSS tôi đang sử dụng:

#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);
}

Đây là một ví dụ sử dụng svgbộ lọc.

Ý tưởng là sử dụng một svgphần tử heightgiống với #overlayvà áp dụng feGaussianblurbộ lọc trên nó. Bộ lọc này được áp dụng trên một svg imagephần tử. Để tạo cho nó một hiệu ứng đùn, bạn có thể sử dụng một box-shadowở dưới cùng của lớp phủ.

Hỗ trợ trình duyệt cho svgcác bộ lọc .

Demo on Codepen

body {
  background: #222222;
}
#container {
  position: relative;
  width: 450px;
  margin: 0 auto;
}
img {
  height: 300px;
}
#overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  color: rgba(130, 130, 130, 0.5);
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

<div id="container">
  <img src="http://lorempixel.com/450/300/sports" />
  <div id="overlay">WET</div>
  <svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;">
    <defs>
      <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
      </filter>
    </defs>
    <image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" />
  </svg>
</div>

Để có câu trả lời đơn giản hơn và cập nhật hơn:

backdrop-filter: blur(6px);

Lưu ý rằng trình duyệt hỗ trợ không phải là hoàn hảo nhưng trong hầu hết các trường hợp, một vệt mờ là không cần thiết.

Tôi đã có thể tổng hợp thông tin từ tất cả mọi người ở đây và Google Googling hơn nữa, và tôi đã nghĩ ra cái sau hoạt động trong Chrome và Firefox: http://jsfiddle.net/xtbmpcsu/ . Tôi vẫn đang làm việc để làm cho nó hoạt động cho IE và Opera.

Điều quan trọng là đưa nội dung vào bên trong div mà bộ lọc được áp dụng:

<div id="mask">
    <p>Lorem ipsum ...</p>
    <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

Và sau đó là CSS:

body {
    background: #300000;
    background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
    color: white;
}
#mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
}
img {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    position: absolute;
    left: 100px;
    top: 100px;
    height: 300px;
    width: auto;
}

Vì vậy, mặt nạ đã áp dụng các bộ lọc. Ngoài ra, hãy lưu ý việc sử dụng url () cho bộ lọc có <svg>thẻ cho giá trị - ý tưởng đó đến từ http://codepen.io/AmeliaBR/pen/xGuBr . Nếu bạn tình cờ rút gọn CSS của mình, bạn có thể cần phải thay thế bất kỳ khoảng trắng nào trong đánh dấu bộ lọc SVG bằng "% 20".

Vì vậy, bây giờ, mọi thứ bên trong div mặt nạ bị mờ.

Nếu bạn đang tìm kiếm một cách tiếp cận trình duyệt chéo đáng tin cậy ngày hôm nay , bạn sẽ không tìm thấy một cách tuyệt vời. Tùy chọn tốt nhất bạn có là tạo hai hình ảnh (điều này có thể được tự động hóa trong một số môi trường) và sắp xếp chúng sao cho hình ảnh này phủ lên hình ảnh kia. Tôi đã tạo một ví dụ đơn giản bên dưới:

<figure class="js">
    <img src="http://i.imgur.com/3oenmve.png" />
    <img src="http://i.imgur.com/3oenmve.png?1" class="blur" />
</figure>

figure.js {
    position: relative;
    width: 250px; height: 250px;
}

figure.js .blur {
    top: 0; left: 0;
    position: absolute;
    clip: rect( 0, 250px, 125px, 0 );
}

Mặc dù hiệu quả, ngay cả cách tiếp cận này cũng không nhất thiết là lý tưởng. Điều đó đang được nói, nó mang lại kết quả mong muốn .

Đây là một giải pháp khả thi.

HTML

<img id="source" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />

<div id="crop">
    <img id="overlay" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

CSS

#crop {
    overflow: hidden;

    position: absolute;
    left: 100px;
    top: 100px;

    width: 450px;
    height: 150px;
}

#overlay {
    -webkit-filter:blur(4px);
    filter:blur(4px);

    width: 450px;
}

#source {
    height: 300px;
    width: auto;
    position: absolute;
    left: 100px;
    top: 100px;
}

Tôi biết CSS có thể được đơn giản hóa và bạn có thể nên loại bỏ id. Ý tưởng ở đây là sử dụng một div làm vùng chứa cắt ảnh và sau đó áp dụng hiệu ứng mờ trên bản sao của hình ảnh. Vĩ cầm

Để làm cho điều này hoạt động trong Firefox, bạn sẽ phải sử dụng SVG hack .

background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);

Thay vì thêm một nền mờ khác vào nội dung của mình, bạn có thể sử dụng bộ lọc phông nền . FYI IE 11 và Firefox có thể không hỗ trợ nó. Kiểm tra caniuse .

Bản giới thiệu:

header {
  position: fixed;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
}
body {
  margin: 0;
}

<header>
  Header
</header>
<div>
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
</div>

Tôi đã đưa ra giải pháp này.

Nhấp để xem hình ảnh của hiệu ứng mờ

Đây là một loại thủ thuật sử dụng phần tử con được định vị hoàn toàn div, đặt hình nền của nó giống với phần tử gốc divvà sau đó sử dụng thuộc tính background-attachment:fixedCSS cùng với các backgroundthuộc tính tương tự được đặt trên phần tử mẹ.

Sau đó, bạn áp dụng filter:blur(10px)(hoặc bất kỳ giá trị nào) trên div con.

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.background{
    position: relative;
    width:100%;
    height:100vh;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
}

.blur{
    position: absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    filter:blur(10px);
    transition:filter .5s ease;
    backface-visibility: hidden;
}

.background:hover .blur{
    filter:blur(0);
}
.text{
    display: inline-block;
    font-family: sans-serif;
    color:white;
    font-weight: 600;
    text-align: center;
    position: relative;
    left:25%;
    top:50%;
    transform:translate(-50%,-50%);
}

<head>
    <title>Blurry Effect</title>
</head>
<body>
    <div class="background">
        <div class="blur"></div>
        <h1 class="text">This is the <br>blurry side</h1>
    </div>
</body>
</html>

xem trên codepen

Đây là một giải pháp hoạt động với các nền cố định, nếu bạn có một nền cố định và bạn có một số yếu tố được phủ lên và bạn cần nền blured cho chúng, thì giải pháp này sẽ hoạt động:

Hình ảnh chúng ta có HTML đơn giản này:

<body> <!-- or any wrapper -->
   <div class="content">Some Texts</div>
</body>

Nền cố định cho <body>hoặc phần tử trình bao bọc:

body {
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Và ví dụ ở đây, chúng tôi có một phần tử được phủ với nền trong suốt màu trắng:

.content {
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
}

Bây giờ chúng ta cũng cần sử dụng hình nền chính xác của trình bao bọc cho các phần tử lớp phủ của chúng ta, tôi sử dụng nó như một :beforelớp psuedo:

.content:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(5px);
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Vì nền cố định hoạt động theo cùng một cách trong cả phần tử bao bọc và phần tử được phủ, nên chúng tôi có nền ở vị trí cuộn chính xác của phần tử được phủ và chúng tôi chỉ cần làm mờ nó. Đây là một fiddle đang hoạt động, đã được thử nghiệm trong Firefox, Chrome, Opera và Edge: https://jsfiddle.net/0vL2rc4d/

LƯU Ý: Trong firefox có một lỗi làm cho màn hình nhấp nháy khi cuộn và có các hình nền bị mờ cố định. nếu có bất kỳ sửa chữa, hãy cho tôi biết

Điều này sẽ thực hiện lớp phủ mờ trên nội dung:

.blur{
 display:block;
 bottom: 0;
 left: 0;
 position: fixed;
 right: 0;
 top: 0;
 -webkit-backdrop-filter: blur(15px);
 backdrop-filter: blur(15px);
 background-color: rgba(0, 0, 0, .5);
}