Размытие изображений и Div в HTML с использованием CSS

Question

Можно ли применить размытие к элементу HTML (div & img)?

Я занимаюсь разработкой исключительно для iPad, поэтому совместимость с различными браузерами не является проблемой, и яможет использовать методы HTML5 CSS3.

Я знаю, как размыть текст, но этот CSS не размывает фактический элемент HTML или его границу:

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

Я гуглил это, но неразмытие изображения в моих браузерах:

filter: blur(strength=50);

Answer 1

Сегодня я видел классное руководство по размытию контента с помощью CSS box-shadow s, text-shadow s, непрозрачности и цвета.

Вот демоверсия: http://tympanus.net/Tutorials/ItemBlur/

И учебник: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

Answer 2

Webkit имеет свойство -webkit-filter, которое позволяет использовать методы размытия: -webkit-filter: blur(15px);

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

Answer 3

Вы можете просто добавить это к своему CSS, для изображения:

В следующем примере вы будете использовать размытие с радиусом 5 пикселей. И чрезвычайно важно использовать все доступные префиксы вендора, поэтому он работает во всех браузерах с этой реализованной функцией, если только речь не идет о "стабильной" версии.

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

Answer 4

Я думаю, что лучший способ состоит в том, чтобы наложить одно и то же изображение на себя несколько раз и проверить различные положения и помутнения на наложенных.

Вот CSS, который я придумал. Имейте в виду, я использую селектор nth-child CSS3 (но у вас, похоже, с этим нет проблем):

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>

Результат довольно многообещающий.

Answer 5

CSS не имеет возможности размытия, кроме техник с text-shadow и box-shadow. Но даже при этом границы и изображения не могут быть размытыми.

Эта библиотека JavaScript , однако, может обрабатывать изображения.

Также, вы можете найти эту технику интересной. Это аккуратная иллюзия с использованием готовых размытых изображений.

Answer 6

Не так давно мне пришлось довольно тщательно исследовать эту проблему, и я нашел чрезвычайно гибкое решение, хотя оно может быть излишним для нужд некоторых людей.Мне нужны были не только размытые изображения, но и динамический радиус размытия, цвет наложения и непрозрачность наложения для различных типов изображений.Мне также нужно было иметь возможность просто размыть изображение на заднем плане с наложенными поверх него другими элементами.Вот лучшее кросс-браузерное (и эффективное) решение, которое я смог создать.

Во-первых, у меня под рукой был бы SVG, беззвучно называемый blur.svg.Он применяет фильтр размытия, и если вы внимательно посмотрите, stdDeviation (который устанавливает радиус размытия) фактически устанавливается программно из переданного параметра в URL-адрес, запрашивающий актив.

<?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>

Тогда у меня былосмесь SCSS, которая позволила бы добавить наложение размытия к любой обертке с настраиваемым радиусом размытия, цветом наложения и непрозрачностью наложения.

@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;
  }
}

Возможно, вам интересно, почему я включил transform: translateZ(0);.Единственный эффект - принудительное аппаратное ускорение рендера для поддержания производительности.Вам также может быть интересно, почему нет префиксов поставщиков.Вы можете искать такие вещи, как filter на CanIUse , если хотите, но я использовал autoprefixer в этом проекте, чтобы беспокоиться обо мне.И, конечно же, зачем фильтровать, используя этот SVG, а не что-то вроде blur(4px)?Разве это не будет проще?Это возможно, но Firefox (на момент написания) поддерживает только свойство filter с URL-адресом.

Затем вы можете применить миксин размытия к классу-оболочке:

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

Обратите внимание,для этого метода мы должны использовать класс с пользовательским фоном, установленным в атрибуте style вместо тега image с src.Вы можете изменить положение фона и изменить размер фона по своему вкусу.

<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>

Answer 7

С помощью CSS3 мы можем легко настроить изображение.Но помните, что это не меняет изображение.Отображается только настроенное изображение.

См. Демонстрационную версию и полный исходный код здесь

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

См. Следующий код для получения дополнительной информации.

Чтобы сделать изображение серым:

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

Чтобы создать эффект сепии:

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

Чтобы настроить яркость:

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

Чтобы настроить контраст:

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

Чтобы размыть изображение:

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