Можно ли применить размытие к элементу HTML (div и img)?
Я разрабатываю исключительно для iPad, поэтому кросс-браузерная совместимость не является проблемой, и я могу использовать HTML5-методы CSS3.
Я знаю, как размыть текст, но этот CSS не размывает фактический элемент HTML или его границу:
text-shadow: 0 0 8px #000;
color: transparent;
Я googled это, но это не размывает изображение в моих браузерах:
filter: blur(strength=50);
Сегодня я увидел крутой учебник о размывании контента с 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/
Webkit имеет свойство -webkit-filter, которое позволяет использовать методы размытия: -webkit-filter: blur(15px);
Вы можете просто добавить это в свой css для изображения:
В следующем примере вы будете использовать размытие с радиусом 5 пикселей. И чрезвычайно важно использовать все префиксы поставщиков, поэтому он работает во всех браузерах с реализованной функцией, не догадываясь, что он подходит к "стабильной" версии.
img{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}
Я думаю, что лучший способ - сложить один и тот же образ над собой несколько раз и проверить различное расположение и непрозрачность на наложенных.
Вот 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>
Результат довольно многообещающий.
CSS не имеет возможности размытия, кроме техник с text-shadow и box-shadow. Но даже при этом границы и изображения не могут быть размыты.
Эта библиотека JavaScript, однако, может обрабатывать изображения.
Кроме того, вы можете найти этот метод интересным. Это аккуратная иллюзия с использованием готовых размытых изображений.
Мне пришлось довольно тщательно изучить эту проблему не так давно и придумал чрезвычайно гибкое решение, хотя для некоторых людей это может быть излишним. Мне нужны были не только размытые изображения, но и динамический радиус размытия, цвет наложения и непрозрачность наложения для различных видов изображений. Мне также нужно было иметь возможность просто размывать изображение в фоновом режиме с другими элементами, наложенными поверх него. Здесь лучшее кросс-браузерное (и исполнительное) решение, которое я смог создать.
Во-первых, у меня был бы 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-адресом.
Затем вы можете применить blur mixin к классу-оболочке:
.my_wrapper_class {
@include background_blurred(3, #f9f7f5, 0.7);
}
Обратите внимание, что для этого метода мы должны использовать класс с настраиваемым фоном, установленным в атрибуте стиля, вместо тега изображения с помощью 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>
С 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);
}