Blur Img & Div's trong HTML bằng cách sử dụng CSS

Question

Có thể áp dụng hiệu ứng nhòe cho phần tử HTML (div & img) không?

Tôi đang phát triển chỉ dành cho iPad để khả năng tương thích giữa các trình duyệt không phải là vấn đề & Tôi có thể sử dụng các kỹ thuật HTML5 CSS3.

tôi biết làm thế nào để làm mờ văn bản nhưng CSS này không làm mờ phần tử HTML thực tế hoặc biên giới của nó:

text-shadow: 0 0 8px #000; 
color: transparent; 

Tôi googled này nhưng nó không làm mờ hình ảnh trong trình duyệt của tôi:

filter: blur(strength=50); 

Answer 1

Tôi đã xem hướng dẫn thú vị hôm nay về làm mờ nội dung với CSS box-shadow s, text-shadow s, độ mờ và màu.

Dưới đây là bản demo: http://tympanus.net/Tutorials/ItemBlur/

Và hướng dẫn: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

Answer 2

Tôi nghĩ cách tốt nhất là xếp cùng một hình ảnh lên chính nó một vài lần và kiểm tra các vị trí và độ mờ khác nhau trên các lớp được phủ.

Đây là CSS mà tôi đã đưa ra. Hãy ghi nhớ Tôi đang sử dụng bộ chọn nth-child CSS3 (nhưng bạn dường như không có một vấn đề với điều đó):

img { 
    width:300px; 
    height:300px; 
    position:absolute; 
    opacity:0.2; 
} 

.container { 
    position:relative; 
    overflow:hidden; 
    width:300px; 
    height:300px; 
} 

img:nth-child(1) { 
    opacity:1; 
} 

img:nth-child(2) { 
    left:2px; 
    top:2px; 
} 

img:nth-child(3) { 
    left:-2px; 
    top:-2px; 
} 

img:nth-child(4) { 
    left:-1px; 
    top:-1px; 
} 

img:nth-child(5) { 
    left:1px; 
    top:1px; 
} 

HTML:

<div class="container"> 
    <img src="..."> 
    <img src="..."> 
    <img src="..."> 
    <img src="..."> 
    <img src="..."> 
</div> 

The result là khá hứa hẹn.

Answer 3

CSS không có khả năng làm mờ, bên cạnh các kỹ thuật với text-shadow và box-shadow. Nhưng ngay cả với những điều này, biên giới và hình ảnh không thể bị mờ. Tuy nhiên,

This JavaScript library, có thể xử lý hình ảnh.

Ngoài ra, bạn có thể thấy điều này technique thú vị. Đó là một ảo ảnh gọn gàng sử dụng hình ảnh mờ được chế tạo sẵn.

Answer 4

Webkit có một tính chất gọi -webkit-filter cho phép các kỹ thuật của mờ: -webkit-filter: blur(15px);

http://jsfiddle.net/danielfilho/KxWRA/

Answer 5

Bạn chỉ có thể thêm này với css của bạn, cho một hình ảnh:

Trong ví dụ sau, bạn sẽ sử dụng hiệu ứng nhòe với bán kính 5 pixel. Và nó là cực kỳ quan trọng để sử dụng tất cả các tiền tố của nhà cung cấp có sẵn, do đó, nó hoạt động trên tất cả các trình duyệt với tính năng này được triển khai, chưa xác định đến phiên bản "ổn định".

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

Answer 6

Với CSS3 chúng ta có thể dễ dàng điều chỉnh hình ảnh. Nhưng hãy nhớ điều này không thay đổi hình ảnh. Nó chỉ hiển thị hình ảnh được điều chỉnh.

Xem demo sống và toàn bộ mã nguồn ở đây

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

Xem đoạn mã sau để biết thêm chi tiết.

Để thực hiện màu xám hình ảnh:

img { 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
} 

Để cung cấp cho một cái nhìn nâu đỏ:

img { 
    -webkit-filter: sepia(100%); 
    -moz-filter: sepia(100%); 
} 

Để điều chỉnh độ sáng:

img { 
    -webkit-filter: brightness(50%); 
    -moz-filter: brightness(50%); 
    } 

Để điều chỉnh độ tương phản:

img { 
    -webkit-filter: contrast(200%); 
    -moz-filter: contrast(200%);  
} 

Để Làm mờ một hình ảnh:

img { 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    } 

Answer 7

tôi đã phải khá triệt để nghiên cứu vấn đề này không quá lâu và đã đưa ra một giải pháp cực kỳ linh hoạt, mặc dù nó có thể là quá mức cần thiết cho nhu cầu của một số người. Tôi không chỉ cần hình ảnh mờ, mà còn là bán kính mờ động, màu lớp phủ và độ mờ lớp phủ cho các loại hình ảnh khác nhau. Tôi cũng cần có tùy chọn chỉ làm mờ hình ảnh trong nền với các yếu tố khác được xếp chồng lên trên nó. Đây là giải pháp cross-browser (và performant) tốt nhất mà tôi có thể tạo ra.

Trước tiên, tôi có một SVG trên tay, được gọi là blur.svg. Nó áp dụng bộ lọc mờ và nếu bạn nhìn kỹ, stdDeviation (đặt bán kính mờ) thực sự được đặt theo chương trình từ tham số được truyền vào URL yêu cầu nội dung.

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter id="blur"> 
<feGaussianBlur stdDeviation="#{params[:blur]}" /> 
</filter> 
</svg> 

Sau đó, tôi đã có một mixin SCSS mà sẽ cho phép một để thêm một lớp phủ mờ cho bất kỳ wrapper, với bán kính mờ tùy biến, màu overlay, và che phủ mờ.

@mixin background_blurred($blur_radius:4, $overlay_color:white, $overlay_opacity:0.6) { 
    position: relative; 
    .background_blurred { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    filter: url('blur.svg#blur?blur=#{$blur_radius}'); 
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$blur_radius}'); 
    transform: translateZ(0); 
    &:after { 
     content: ''; 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
     background: $overlay_color; 
     opacity: $overlay_opacity; 
    } 
    } 
    .foreground { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    z-index: 2; 
    } 
} 

Bạn có thể thắc mắc tại sao tôi bao gồm transform: translateZ(0);. Hiệu ứng duy nhất có là buộc tăng tốc phần cứng trên render để giữ cho mọi thứ có hiệu năng. Bạn cũng có thể tự hỏi tại sao không có tiền tố của nhà cung cấp. Bạn có thể tìm kiếm những thứ như filter trên CanIUse nếu bạn muốn, nhưng tôi đã sử dụng autoprefixer trong dự án này để lo lắng về nội dung đó cho tôi. Và tất nhiên, tại sao bộ lọc bằng cách sử dụng SVG này, thay vì với một cái gì đó như blur(4px)? Sẽ không dễ dàng hơn sao? Nó sẽ, nhưng Firefox (bằng văn bản) chỉ hỗ trợ các tài sản filter với một URL.

Sau đó, bạn có thể áp dụng mixin mờ về một lớp wrapper:

.my_wrapper_class { 
    @include background_blurred(3, #f9f7f5, 0.7); 
} 

Chú ý rằng đối với phương pháp này, chúng ta phải sử dụng một lớp với một nền tùy chỉnh thiết lập trong một thuộc tính style thay vì một thẻ hình ảnh với một src. Bạn có thể tinh chỉnh vị trí nền và ghi đè kích thước nền theo ý thích của bạn.

<div class="my_wrapper_class"> 
    <div class="background_blurred" style="background: url('URL OF IMAGE TO BLUR') no-repeat; background-position: 50% 0;"></div> 
    <div class="foreground"> 
    <p>Stuff that should appear above the blurred background and not be blurred.</p> 
    </div> 
</div>