Как сделать такой фон. Через Фотошоп или CSS. Типа матового стекла
3 ответа
через фотошоп.
-
понизить контраст добавить какой нибудь lens blur. ...или просто фоток наделать не в фокусе. 9 ноя 2013 в 15:04
-
может не по теме, но все же, вдруг пригодится.. Чтобы добиться такого размытия, как Tilt-shift и Bokeh, для фотошопа, помимо обычного размытия, есть плагин Alien Skin Bokeh 2, который размывает очень профессионально. Кроме полного размытия фона можно сделать вот такой "[мультик][1]" ). [1]: forum.sony-club.ru/photo/data/500/DSC03741-1sm.jpg– NoName10 ноя 2013 в 14:31
-
1
Все примеры, которые находил в инете, либо с помощью сторонних библиотек, либо работают только в Chrome - кривой ie не хочет обрабатывать filter: blur(n_px) ;(((
Проблему решил следующим образом на чистом html + css:
body {
margin: 0;
}
#id_child {
position: absolute;
z-index: 99;
width: 100%;
}
#id_parent {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
}
#id1_text {
position: static;
float: left;
width: 100%;
color: #fff;
text-align: center;
text-shadow: 0 0 5px rgba(0, 0, 0, .5);
}
#svg-image-blur {
width: 100%;
height: 100%;
}
.svg-image {
width: 100%;
height: 100%;
filter: url(#blur-effect);
}
<div id="id_parent">
<div id="id_child">
<div id="id1_text">
<h2>Welcome to our website!</h2>
</div>
</div>
<svg id="svg-image-blur">
<image xlink:href="no-blur.png" preserveAspectRatio="none" class="svg-image" width="100%" height="100%" />
<filter id="blur-effect"> <feGaussianBlur stdDeviation="8" /> </filter>
</svg>
</div>
Суть тут в том, что svg-блок должен располагаться внутри элемента с position: absolute; , иначе некорректно рассчитывается высота вложенного элемента (картинки), если задавать её для родителей (в данном случае, блока id_parent) в % (percentage). Высота у svg-image-blur получается 150px - дефолтная для svg-элементов. То есть, или ставим родителю position: absolute;, или высоту родителя нужно задать жёстко в px (pixels).
Более изящного и краткого решения придумать не удалось.