3
До сих пор я не нашел ничего, чтобы заменить использование свойства clip. Я пробовал использовать отрицательные поля безрезультатно. И теперь моя последняя надежда - javascript. Я искал его, но на самом деле не нашел то, что искал.Обрезание изображений с помощью Javascript
Я хочу, чтобы закрепить края изображений, поэтому, когда фильтр размытия применяется к изображению, края не размыты, а четкие. Да, я действительно использовал фильтров SVG, но не мог найти правильный способ сделать плавный переход
<style>
#content{
background:#fff;
}
.one{
width:455px;
height:213px;
overflow:hidden;
display:inline-block;
vertical-align:top;
}
.one img{
position:relative;
top:-30px;
left:-7px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.one img:hover{
filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
-o-filter: blur(3px); -ms-filter: blur(3px);
filter: url(blur.svg#blur);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
</style>
<div id="content">
<span class="one">
<a href="/"><img src="http://0.tqn.com/d/create/1/0/z/I/4/-/forthebirds.jpg" /></a>
</span>
</div>
Пожалуйста, вы можете показать нам код, который вы сейчас используете? – Undefined
http://jsfiddle.net/QktNN/, когда изображение зависло, вы все еще можете видеть, что края размыты. Я даже пытался уменьшить ширину, а также позиционирование .one img, но он ничего не делает – Xceptic
Пожалуйста, добавьте в сообщение код в сообщении, а не просто ссылку на скрипку (хотя это тоже полезно). Кроме того, пример, кажется, имеет острые края, используя переполнение: скрытая техника ...? – David