Работа с blur() эффектом CSS

349
29 июля 2017, 05:10

Как видно в этом примере, когда я использую blur(5px), картинка становится меньше на 5 пикселей из-за блура и можно видеть по краям цвет (от другой картинки). 

$(document).ready(function() { 
    $('.main-carousel').slick({ 
        accessibility: 'true', 
        arrows: 'true', 
        slidesToShow: 1, 
        slidesToScroll: 1 
    }); 
});
.main-image { 
    filter: blur(5px); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" /> 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" /> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
 <div class="main-carousel"> 
    <div><img class="main-image" src="http://www.1366x768.ru/nature/373/373-zima-sneg-doroga-oboi-priroda-1366x768.jpg" alt="Chaina"></div> 
    <div><img class="main-image" src="http://www.1366x768.ru/macro/7/7-beloe-pero-makro-oboi-1366x768.jpg" alt="Chicago"></div> 
    <div><img class="main-image" src="http://www.1366x768.ru/macro/8/8-trava-makro-oboi-1366x768.jpg" alt="New York"></div> 
</div>

Вопрос: Как сделать так, чтоб не было этой рамки из-за размытия, чтоб она обрезалась или еще как-нибудь, чтоб картинка нормально выглядела? Может есть какой-нибудь другой способ, или плагин, который делает блур качественнее?

Answer 1

$(document).ready(function(){ 
 
    $('.main-carousel').slick({ 
        accessibility: 'true', 
        arrows: 'true', 
        slidesToShow: 1, 
        slidesToScroll: 1 
    }); 
 
});
.main-image { 
    filter: blur(5px); 
} 
 
.slick-initialized .slick-slide { 
    overflow: hidden; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" /> 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" /> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
 <div class="main-carousel"> 
    <div><img class="main-image" src="http://www.1366x768.ru/nature/373/373-zima-sneg-doroga-oboi-priroda-1366x768.jpg" alt="Chaina"></div> 
    <div><img class="main-image" src="http://www.1366x768.ru/macro/7/7-beloe-pero-makro-oboi-1366x768.jpg" alt="Chicago"></div> 
    <div><img class="main-image" src="http://www.1366x768.ru/macro/8/8-trava-makro-oboi-1366x768.jpg" alt="New York"></div> 
</div>

overflow: hidden; для слайда. Лучше не объявлять общие стили, а повесить на слайд какой-нибудь класс и прописать hidden для него.

Так же, вот: https://www.w3schools.com/cssref/css3_pr_filter.asp по фильтрам. Лучше использовать префиксы :)

Answer 2

Можно попробовать растянуть картинку на 10px (5+5) в двух осях, лишнее скрыть отрицательным margin:

$(document).ready(function(){ 
 
    $('.main-carousel').slick({ 
        accessibility: 'true', 
        arrows: 'true', 
        slidesToShow: 1, 
        slidesToScroll: 1 
    }); 
 
});
.main-image { 
    filter: blur(5px); 
    margin: -5px; 
    width: 1376px; 
    height: 778px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" /> 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" /> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
 <div class="main-carousel"> 
    <div><img class="main-image" src="http://www.1366x768.ru/nature/373/373-zima-sneg-doroga-oboi-priroda-1366x768.jpg" alt="Chaina"></div> 
    <div><img class="main-image" src="http://www.1366x768.ru/macro/7/7-beloe-pero-makro-oboi-1366x768.jpg" alt="Chicago"></div> 
    <div><img class="main-image" src="http://www.1366x768.ru/macro/8/8-trava-makro-oboi-1366x768.jpg" alt="New York"></div> 
</div>

READ ALSO
Как сделать фон &ldquo;сетку из точек&rdquo; с помощью css3?
CSS

Как сделать фон “сетку из точек” с помощью css3?

Подскажите, пожалуйста, как сделать с помощью css3 такой фон? И возможно ли в принципе?

 431
Фон или картинку на картинку CSS
CSS

Фон или картинку на картинку CSS

Подскажите самый простой и кроссбраузерный вариант наложения фона или картинки на картинкуНужно тупо затемнить

 527
Помогите с фоном пожалуйста! [требует правки]
Java

Помогите с фоном пожалуйста! [требует правки]

Как сделать фон черным с JTextField?

 317
Java 8: Optional против if else. Что быстрее?
Java

Java 8: Optional против if else. Что быстрее?

С введением в Java 8 новой конструкции Optional у меня возникли разногласия с коллегами по поводу скорости работы Optional vs if-else vs тернарный операторНесколько...

 402