Tôi có một tệp JPEG mà tôi đang sử dụng làm hình nền cho trang tìm kiếm và tôi đang sử dụng CSS để đặt nó vì tôi đang làm việc trong bối cảnh Backbone.js :

background-image: url("whatever.jpg");

Tôi muốn áp dụng một bộ lọc mờ CSS 3 chỉ để nền, nhưng tôi không chắc chắn làm thế nào để phong cách chỉ là một phần tử. Nếu tôi cố gắng:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

ngay bên dưới background-imageCSS của tôi, nó tạo kiểu cho toàn bộ trang, thay vì chỉ là nền. Có cách nào để chỉ chọn hình ảnh và áp dụng bộ lọc cho điều đó không? Ngoài ra, có cách nào để tắt mờ cho mọi yếu tố khác trên trang không?

Kiểm tra cây bút này .

Bạn sẽ phải sử dụng hai thùng chứa khác nhau, một cho hình nền và một cho nội dung của bạn.

Trong ví dụ này, tôi đã tạo ra hai container .background-imagevà .content.

Cả hai đều được đặt với position: fixedvà left: 0; right: 0;. Sự khác biệt trong việc hiển thị chúng đến từ các z-indexgiá trị được đặt khác nhau cho các phần tử.

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
    rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
    quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
    tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

Lời xin lỗi cho văn bản Lorem Ipsum .

Cập nhật

Cảm ơn Matthew Wilcoxson vì đã triển khai tốt hơn bằng cách sử dụng .content:before http://codepen.io/akademy/pen/FlkzB

cây bút

Xóa bỏ nhu cầu về một yếu tố phụ, cùng với việc làm cho nội dung phù hợp với luồng tài liệu thay vì cố định / tuyệt đối như các giải pháp khác.

Đạt được bằng cách sử dụng

.content {
  overflow: auto;
  position: relative;
}

Tự động tràn là cần thiết, nếu không, nền sẽ được bù bởi một vài pixel ở trên cùng.

Sau này, bạn chỉ cần

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

EDIT Nếu bạn muốn loại bỏ các viền trắng ở các cạnh, hãy sử dụng chiều rộng và chiều cao 110%và bên trái và trên cùng -5%. Điều này sẽ phóng to nền của bạn một chút - nhưng sẽ không có hiện tượng chảy màu ở các cạnh.

Bút cập nhật tại đây: https://codepen.io/anon/pen/QgyewB - Cảm ơn Chad Fawcett về gợi ý.

Như đã nêu trong các câu trả lời khác, điều này có thể đạt được với:

• Một bản sao của hình ảnh mờ làm nền.
• Một phần tử giả có thể được lọc sau đó được định vị phía sau nội dung.

Bạn cũng có thể dùng backdrop-filter

Có một thuộc tính được hỗ trợ được gọi backdrop-filtervà hiện tại nó được hỗ trợ trong Chrome 76, Edge , Safari và iOS Safari (xem caniuse.com để biết số liệu thống kê).

Từ Mozilla devdocs :

Thuộc tính bộ lọc nền cung cấp các hiệu ứng như làm mờ hoặc chuyển màu khu vực phía sau một phần tử, sau đó có thể được nhìn thấy qua phần tử đó bằng cách điều chỉnh độ trong suốt / độ mờ của phần tử.

Xem caniuse.com để biết số liệu thống kê sử dụng.

Bạn sẽ sử dụng nó như vậy:

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

<div class="background background-filter"></div>

Cập nhật (12/06/2019) : Chromium sẽ xuất xưởng với backdrop-filtertính năng được bật theo mặc định trong phiên bản 76, dự kiến ra mắt vào 30/07/2019 .

Cập nhật (01/06/2019) : Nhóm Firefox Mozzilla đã thông báo sẽ bắt đầu thực hiện việc này sớm.

Cập nhật (21/05/2019) : Chromium vừa được công bố backdrop-filter có sẵn trong chrome canary mà không bật cờ "Bật tính năng nền tảng web thử nghiệm". Điều này có nghĩa backdrop-filterlà rất gần với việc được thực hiện trên tất cả các nền tảng chrome.

Bạn cần cấu trúc lại HTML của mình để thực hiện việc này. Bạn phải làm mờ toàn bộ thành phần để làm mờ nền. Vì vậy, nếu bạn muốn làm mờ chỉ nền, nó phải là yếu tố riêng của nó.

Vui lòng kiểm tra mã dưới đây: -

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);	
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}

<div class="backgroundImageCVR">
    <div class="background-image"></div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
      <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
    </div>
</div>

Sau đây là một giải pháp đơn giản cho các trình duyệt hiện đại trong CSS thuần với phần tử giả 'trước', giống như giải pháp từ Matthew Wilcoxson.

Để tránh sự cần thiết phải truy cập phần tử giả để thay đổi hình ảnh và các thuộc tính khác trong JavaScript, chỉ cần sử dụng inheritlàm giá trị và truy cập chúng thông qua phần tử cha (ở đây body).

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

Trong .contenttab trong CSS thay đổi nó thành position:absolute. Nếu không, trang được hiển thị sẽ không thể cuộn được.

Mặc dù tất cả các giải pháp được đề cập đều rất thông minh, nhưng tất cả dường như có vấn đề nhỏ hoặc tiềm năng gây ảnh hưởng với các yếu tố khác trên trang khi tôi thử chúng.

Cuối cùng, để tiết kiệm thời gian, tôi chỉ đơn giản quay lại giải pháp cũ của mình: Tôi đã sử dụng Paint.NET và đi đến Effects, Gaussian Blur với bán kính 5 đến 10 pixel và chỉ lưu nó dưới dạng hình ảnh trang. :-)

HTML:

<body class="mainbody">
</body

CSS:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

BIÊN TẬP:

Cuối cùng tôi đã làm cho nó hoạt động, nhưng giải pháp không có nghĩa là đơn giản! Xem tại đây:

• bộ lọc: làm mờ (1px); không hoạt động trong firefox, IE và opera

Tất cả những gì bạn thực sự cần là "bộ lọc":

blur(«WhatEverYouWantInPixels»);"

body {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

#background {
    background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    /* START */
    /* START */
    /* START */
    /* START */

    /* You can adjust the blur-radius as you'd like */
    filter: blur(3px);
}

<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

Tất nhiên, đây không phải là giải pháp CSS, nhưng bạn có thể sử dụng CDN Proton với filter:

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

Đó là từ https://developer.wordpress.com/docs/photon/api/#filter

Tôi đã không viết điều này, nhưng tôi nhận thấy có một polyfill được hỗ trợ một phần backdrop-filterbằng trình biên dịch CSS SASS, vì vậy nếu bạn có một đường dẫn biên dịch thì nó có thể đạt được một cách độc đáo (nó cũng sử dụng TypeScript):

https://codepen.io/mixal_bl4/pen/EwPMWo

Câu trả lời này dành cho bố cục thẻ ngang Thiết kế Vật liệu với chiều cao động và hình ảnh.

Để tránh làm biến dạng hình ảnh do chiều cao động của thẻ, bạn có thể sử dụng hình ảnh giữ chỗ nền có độ mờ để điều chỉnh các thay đổi về chiều cao.

Giải trình

• Thẻ được chứa trong một <div>lớp bao bọc , là một hộp linh hoạt.
• Thẻ được tạo thành từ hai yếu tố, một hình ảnh cũng là một liên kết và nội dung.
• Các liên kết <a>, lớp liên kết , được bố trí tương đối .
• Liên kết bao gồm hai thành phần phụ, mờ<div> lớp giữ chỗ và pic lớp là hình ảnh rõ ràng.<img>
• Cả hai đều được định vị tuyệt đối và có width: 100%, nhưng lớp pic có thứ tự ngăn xếp cao hơn, nghĩa là, z-index: 2đặt nó lên trên trình giữ chỗ.
• Hình nền cho trình giữ chỗ bị mờ được đặt thông qua kiểu nội tuyến trong HTML.

Mã

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}

<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>

Bây giờ điều này thậm chí còn trở nên đơn giản và linh hoạt hơn bằng cách sử dụng CSS GRID. Bạn chỉ cần chồng chéo nền mờ (imgbg) với văn bản (h2)

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

và css:

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

Không sử dụng lớp giả từ

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}

<body></body>

Nếu bạn muốn nội dung có thể cuộn được, hãy đặt vị trí của nội dung thành tuyệt đối:

content {
   position: absolute;
   ...
}

Tôi không biết nếu điều này chỉ dành cho tôi, nhưng nếu không thì đó là cách khắc phục!

Ngoài ra, vì nền được cố định, điều đó có nghĩa là bạn có hiệu ứng "thị sai" ! Vì vậy, bây giờ, người này không chỉ dạy bạn cách làm mờ hậu cảnh mà còn là hiệu ứng nền thị sai!