Я знаю, что есть множество новых фильтров CSS, и мне интересно, есть ли способ применить их к изображению или фоновому изображению. Все, что я прочитал, говорит о смягчении изображения с помощью теневой тени, однако тень для тени - это цвет, и я хочу размыть края изображений, чтобы я мог объединить их более легко, если они были рядом друг с другом. Сейчас похоже, что вы можете использовать только тень или применить размытие ко всему изображению (на основе того, что я прочитал).
Ближайшим, с которым я могу придумать, является полупрозрачная тень коробок.... вроде этого
-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75);
Если вы ищете просто для размытия краев изображения, вы можете просто использовать тень окна с вставкой.
Рабочий пример: http://jsfiddle.net/d9Q5H/1/
HTML:
<div class="image-blurred-edge"></div>
CSS
.image-blurred-edge {
background-image: url('http://lorempixel.com/200/200/city/9');
width: 200px;
height: 200px;
/* you need to match the shadow color to your background or image border for the desired effect*/
box-shadow: 0 0 8px 8px white inset;
}
Я не совсем уверен, какой визуальный конечный результат вам нужен, но вот простой способ размыть край изображения: поместите div с изображением внутри другого div с размытым изображением.
Рабочий пример здесь: http://jsfiddle.net/ZY5hn/1/
HTML:
<div class="placeholder">
<!-- blurred background image for blurred edge -->
<div class="bg-image-blur"></div>
<!-- same image, no blur -->
<div class="bg-image"></div>
<!-- content -->
<div class="content">Blurred Image Edges</div>
</div>
CSS
.placeholder {
margin-right: auto;
margin-left:auto;
margin-top: 20px;
width: 200px;
height: 200px;
position: relative;
/* this is the only relevant part for the example */
}
/* both DIVs have the same image */
.bg-image-blur, .bg-image {
background-image: url('http://lorempixel.com/200/200/city/9');
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
}
/* blur the background, to make blurred edges that overflow the unblurred image that is on top */
.bg-image-blur {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
}
/* I added this DIV in case you need to place content inside */
.content {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
color: #fff;
text-shadow: 0 0 3px #000;
text-align: center;
font-size: 30px;
}
Обратите внимание, что размытый эффект используется с изображением, поэтому он изменяется с цветом изображения.
Надеюсь, это поможет.
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#grad1 {
height: 400px;
width: 600px;
background-image: url(t1.jpg);/* Select Image Hare */
}
#gradup {
height: 100%;
width: 100%;
background: radial-gradient(transparent 20%, white 70%); /* Set radial-gradient to faded edges */
}
</style>
</head>
<body>
<h1>Fade Image Edge With Radial Gradient</h1>
<div id="grad1"><div id="gradup"></div></div>
</body>
</html>