Làm mờ các cạnh của hình ảnh hoặc hình nền với CSS

Question

Tôi biết có một loạt các bộ lọc CSS mới và tôi tự hỏi liệu có cách nào áp dụng chúng cho hình ảnh hoặc hình nền hay không. Tất cả mọi thứ tôi đã đọc nói về làm mềm hình ảnh với một bóng đổ, tuy nhiên, một bóng đổ là một màu sắc, và tôi muốn làm mờ các cạnh của hình ảnh để tôi có thể pha trộn chúng với nhau liền mạch hơn nếu chúng được bên cạnh nhau. Ngay bây giờ có vẻ như bạn chỉ có thể đi với một bóng đổ hoặc áp dụng một mờ cho toàn bộ hình ảnh (dựa trên những gì tôi đã đọc).

Gần nhất tôi có thể đưa ra là một cái bóng hộp bán trong suốt .... như thế này

-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); 
-moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); 
box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); 

Answer 1

Tôi không hoàn toàn chắc chắn những gì cuối thị giác dẫn bạn sau đó, nhưng đây là một cách dễ dàng cách làm mờ cạnh của hình ảnh: đặt một div với hình ảnh bên trong div khác với hình ảnh bị mờ. Ví dụ

Làm việc ở đây: http://jsfiddle.net/ZY5hn/1/

HTML:

<div class="placeholder"> 
    <!-- blurred background image for blurred edge --> 
    <div class="bg-image-blur"></div> 
    <!-- same image, no blur --> 
    <div class="bg-image"></div> 
    <!-- content --> 
    <div class="content">Blurred Image Edges</div> 
</div> 

CSS:

.placeholder { 
    margin-right: auto; 
    margin-left:auto; 
    margin-top: 20px; 
    width: 200px; 
    height: 200px; 
    position: relative; 
    /* this is the only relevant part for the example */ 
} 
/* both DIVs have the same image */ 
.bg-image-blur, .bg-image { 
    background-image: url('http://lorempixel.com/200/200/city/9'); 
    position:absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height:100%; 
} 
/* blur the background, to make blurred edges that overflow the unblurred image that is on top */ 
.bg-image-blur { 
    -webkit-filter: blur(20px); 
    -moz-filter: blur(20px); 
    -o-filter: blur(20px); 
    -ms-filter: blur(20px); 
    filter: blur(20px); 
} 
/* I added this DIV in case you need to place content inside */ 
.content { 
    position: absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    color: #fff; 
    text-shadow: 0 0 3px #000; 
    text-align: center; 
    font-size: 30px; 
} 

Thông báo tác động mờ được usin g hình ảnh, do đó, nó thay đổi với màu của hình ảnh.

Tôi hy vọng điều này sẽ hữu ích.

Answer 2

Nếu những gì bạn đang tìm kiếm chỉ đơn giản là làm mờ các cạnh hình ảnh, bạn có thể chỉ cần sử dụng hộp đổ bóng với một inset.

dụ làm việc: http://jsfiddle.net/d9Q5H/1/

HTML:

<div class="image-blurred-edge"></div> 

CSS

.image-blurred-edge { 
    background-image: url('http://lorempixel.com/200/200/city/9'); 
    width: 200px; 
    height: 200px; 
    /* you need to match the shadow color to your background or image border for the desired effect*/ 
    box-shadow: 0 0 8px 8px white inset; 
}