Các cạnh được xác định với bộ lọc CSS3 Blur

79

Tôi đang làm mờ một số hình ảnh với mã này

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

Các cạnh của hình ảnh cũng bị mờ. Có thể làm mờ hình ảnh, trong khi vẫn giữ các cạnh được xác định? Giống như một vết mờ bên trong hoặc một cái gì đó?

css 
— colmtuite
nguồn

Câu trả lời:

100

Bạn có thể đặt nó trong một <div>với overflow: hidden;và thiết lập <img>để margin: -5px -10px -10px -5px;.

Bản giới thiệu: jsFiddle

Đầu ra

CSS

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}
​

HTML

<div><img src="http://placekitten.com/300" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>​​​​​​​​​​​​
— ThinkingStiff
nguồn
1
@Moppy Điều đó không hoạt động trong Chrome 23 / OS X đối với tôi. Tôi nghĩ marginlà bắt buộc.
— ThinkingStiff
1
@Moppy Bởi vì imgbên trong divvà nó blurđang vượt qua ranh giới của div. Các overflow: hidden;cắt nó đi.
— ThinkingStiff
10
Có gì với rác ở dưới cùng của JSFiddle? Tôi không hiểu tại sao theo dõi GA một JSFiddle là cần thiết ...
— Bojaries
1
@Bojangle, "rác" ở dưới cùng của hình ảnh trong jsfiddle nằm trong chính hình ảnh đó .
— uberdog
3
Có cách nào để làm điều này cho hình nền không? Ý tưởng là tạo một hình nền mờ với văn bản trên đó
— Guy
57

Tôi đã có thể làm cho điều này hoạt động với

transform: scale(1.03);

Thuộc tính áp dụng trên hình ảnh. Vì một số lý do, trên Chrome, các giải pháp khác được cung cấp sẽ không hoạt động nếu có bất kỳ phần tử gốc nào được định vị tương đối.

Kiểm tra http://jsfiddle.net/ud5ya7jt/

Bằng cách này, hình ảnh sẽ được phóng to một chút lên 3% và các cạnh sẽ bị cắt, điều này không thành vấn đề với hình ảnh bị mờ. Nó hoạt động tốt trong trường hợp của tôi vì tôi đang sử dụng hình ảnh có độ phân giải cao làm nền. Chúc may mắn!

— João Josézinho
nguồn
điều này là tốt đẹp và đơn giản và có thể điều chỉnh. nó hoạt động hoàn hảo cho tình huống của tôi jsfiddle.net/ud5ya7jt/28 trong khi một số giải pháp khác dường như không thành công.
— Jeannie
Cảm ơn bạn rất nhiều vì điều này, chính xác là những gì tôi đang tìm kiếm :)
— jeerbl
1
thiết lập cha với overflow: hiddensẽ loại bỏ các thanh cuộn! cảm ơn!
— dimmg 22/02/17
1
Một giải pháp đơn giản như vậy!
— Dotl 21/09/17
quy mô (1) không làm việc nhưng 1,03 là để chúng tôi cắt hình ảnh bằng 3% theo thứ tự cho các cạnh mờ để không được như dễ nhận biết
— João Josézinho
17

Tôi đã sử dụng -webkit-transform: translate3d(0, 0, 0);với overflow:hidden;.

DOM:

<div class="parent">
    <img class="child" src="http://placekitten.com/100" />
</div>

CSS:

.parent {
    width: 100px;
    height: 100px;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
}
.child {
    -webkit-filter: blur(10px);
}

DEMO: http://jsfiddle.net/DA5L4/18/

Kỹ thuật này hoạt động trên Chrome34 và iOS7.1

Cập nhật

http://jsfiddle.net/DA5L4/50/

nếu bạn sử dụng phiên bản Chrome mới nhất, bạn không cần phải sử dụng -webkit-transform: translate3d(0, 0, 0);hack. Nhưng nó không hoạt động trên Safari (webkit).

— GeckoTang
nguồn
@Razvan Cercelaru thật hả? Bạn đã kiểm tra phiên bản safari nào của tôi? Nó hoạt động trong Mac Safari 7.
— GeckoTang
Đã làm cho tôi! Cảm ơn! (Chromium 50.0.2661.86 (64-bit) OSX)
— iperdiscount
12

Bạn cũng có thể giữ lại toàn bộ video mà không cần phải cắt bỏ nội dung nào đó.
Bạn có thể phủ bóng chèn lên các cạnh mờ trắng.

Cái này trông cũng rất đẹp :)

Chỉ cần dán mã này vào video gốc của bạn:

.parent {
    -webkit-box-shadow: inset 0 0 200px #000000;
       -moz-box-shadow: inset 0 0 200px #000000;
            box-shadow: inset 0 0 200px #000000;
}
— GlabbichRulz
nguồn
1
Hoạt động một điều trị, không có đề xuất nào khác giúp ích.
— DGibbs
2
Trong trường hợp của tôi, nó đã giúp, nhưng nó vẫn còn để lại một số vệt mờ không mong muốn, vì vậy tôi bổ sung thêm một lớp hộp bóng:box-shadow: inset 0 0 200px #000000, inset 0 0 200px #000000;
— falsarella
6

Trong nhiều tình huống mà IMG có thể được đặt ở vị trí: tuyệt đối , bạn có thể sử dụng kẹp để ẩn các cạnh bị mờ - và DIV bên ngoài là không cần thiết.

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    position: absolute;
    clip: rect(5px,295px,295px;5px);
}
— genedronek
nguồn
1
caniuse.com/#feat=css-clip-path tại đây trình duyệt hỗ trợ cắt. IE là tốt nhất 😆
— Philip Giuliani
6

Hôm nay, tôi đã tự mình giải quyết vấn đề tương tự này, tôi muốn trình bày một giải pháp (hiện tại) hoạt động trên các trình duyệt chính. Một số câu trả lời khác trên trang này đã hoạt động một lần, nhưng các bản cập nhật gần đây, cho dù đó là trình duyệt hay hệ điều hành, đã vô hiệu hầu hết / tất cả các câu trả lời này.

Chìa khóa là đặt hình ảnh vào một vùng chứa và chuyển đổi: chia tỷ lệ vùng chứa đó ra khỏi nó tràn: ẩn phụ huynh. Sau đó, hiệu ứng mờ được áp dụng cho img bên trong vùng chứa, thay vì trên chính vùng chứa.

Làm việc Fiddle: https://jsfiddle.net/x2c6txk2/

HTML

<div class="container">
    <div class="img-holder">
        <img src="https://unsplash.it/500/300/?random">
    </div>
</div>

CSS

.container {
    width    : 90%;
    height   : 400px;
    margin   : 50px 5%;
    overflow : hidden;
    position : relative;
}

.img-holder {
    position  : absolute;
    left      : 0;
    top       : 0;
    bottom    : 0;
    right     : 0;
    transform : scale(1.2, 1.2);
}

.img-holder img {
    width          : 100%;
    height         : 100%;
    -webkit-filter : blur(15px);
    -moz-filter    : blur(15px);
    filter         : blur(15px);
}
— rorymorris89
nguồn
3

Chỉ là một số gợi ý cho câu trả lời được chấp nhận đó, nếu bạn đang sử dụng vị trí tuyệt đối, lề âm sẽ không hoạt động, nhưng bạn vẫn có thể đặt trên cùng, dưới cùng, trái và phải thành giá trị âm và làm ẩn phần tử gốc.

Câu trả lời về việc thêm clip vào vị trí hình ảnh tuyệt đối có vấn đề nếu bạn không biết kích thước hình ảnh.

— cn123h
nguồn
2

Chèn hình ảnh vào bên trong dấu position: relative;vàoverflow: hidden;

HTML

<div><img src="#"></div>

CSS

div {
    position: relative;
    overflow: hidden;
}
img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
}

Điều này cũng hoạt động trên các phần tử có kích thước thay đổi, như div động.

— bpanatta
nguồn
1

Bạn có thể ngăn hình ảnh chồng lên các cạnh bằng cách cắt hình ảnh và áp dụng phần tử bao bọc để đặt hiệu ứng mờ thành 0 pixel. Đây là cách nó trông như thế này:

HTML

<div id="wrapper">
  <div id="image"></div>
</div>

CSS

#wrapper {
  width: 1024px;
  height: 768px;

  border: 1px solid black;

  // 'blur(0px)' will prevent the wrapped image
  // from overlapping the border
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}

#wrapper #image {
  width: 1024px;
  height: 768px;

  background-image: url("../images/cats.jpg");
  background-size: cover;

  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);

  // Position 'absolute' is needed for clipping
  position: absolute;
  clip: rect(0px, 1024px, 768px, 0px);
}
— Benny Neugebauer
nguồn
1

Cách đơn giản nhất là chỉ cần thêm một đường viền trong suốt vào div chứa hình ảnh và đặt thuộc tính hiển thị của nó thành inline-block như sau:

CSS:

div{
margin: 2rem;
height: 100vh;
overflow: hidden;
display: inline-block;
border: 1px solid #00000000;
}

img {
-webkit-filter: blur(2rem);
filter: blur(2rem);
}

HTML

<div><img src='https://images.unsplash.com/photo-1557853197-aefb550b6fdc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80' /></div>

Đây là một codepen mô tả giống nhau: https://codepen.io/arnavozil/pen/ExPYKNZ

— arnavpanwar99
nguồn
0

Bạn có thể thử thêm đường viền trên một phần tử khác:

DOM:

<div><img src="#" /></div>

CSS:

div {
   border: 1px solid black;
}
img {
    filter: blur(5px);
}
— Krycke
nguồn
0

Đây là một giải pháp tôi đưa ra để giữ 100% hình ảnh và không cần cắt:

Về cơ bản, tôi phản chiếu hình ảnh trong lưới 3x3 sau đó làm mờ mọi thứ và sau đó phóng to ở trung tâm hình ảnh một cách hiệu quả tạo ra các cạnh lặp lại khi làm mờ sau các hiệu ứng, hơi lạ là css3 không có các cạnh lặp lại được tích hợp sẵn.

Liên kết đến phương thức / mã: Làm thế nào để làm mờ hình ảnh bằng CSS3 mà không cắt hoặc làm mờ các cạnh?

— Patrik Fröhler
nguồn
1
Mặc dù liên kết này có thể trả lời câu hỏi, nhưng tốt hơn hết bạn nên đưa các phần thiết yếu của câu trả lời vào đây và cung cấp liên kết để tham khảo. Các câu trả lời chỉ có liên kết có thể trở nên không hợp lệ nếu trang được liên kết thay đổi.
— Arnon Zilca
Vâng vâng hài hước mà bạn nói rằng vì tôi chỉ cập nhật bưu chính, tiêu đề và đó hoàn toàn sai lầm liên kết ở đây x)
— Patrik Fröhler
0

Nếu bạn đang sử dụng hình nền, cách tốt nhất mà tôi tìm thấy là:

filter: blur(5px);
margin-top: -5px;
padding-bottom: 10px;
margin-left: -5px;
padding-right: 10px;
— Elad Swissa
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.