Css сүзгісі бар кескін қалай болуы керек: бұлыңғыр және өткір жиектер?

Ұшу кезінде суретті түсіргім келеді.

Мәселе мынада, бұл кескіннің шеттері да жағымсыз. Скрипкада оны жасыл фонмен анық көре аласыз.

1.2 суретті масштабтау керек болса, бұл мәселені соңында түзетеді, бірақ өту кезінде бұлыңғыр шеттер әлі де пайда болады.

Осы әсермен өткір қырлар қалай болуы керек?

http://jsfiddle.net/d8Njs/

html:

<div class="item">
   
</div>

css:

.item {
overflow: hidden;
width:300px;
height: 300px;
background: green;
}

.item img{
transition:all .5s ;
}

.item img:hover{
-webkit-filter: blur(5px);
/*skaling the image would help, but it still looks bad during the transition
-webkit-transform:scale(1.2); */
}
8
Fascinating problem - Webkit метхinksдегі қате.
қосылды автор Niels Keurentjes, көзі
-webkit-transform: scale (1.0) -пен масштабтау 1,2-ден қарағанда тиімді болуы керек сияқты ... бірақ ол шеттерін ұстап тұрса да, ол жағымсыз жасыл көшу кезінде кескін айналасында пайда болатын әсер.
қосылды автор Spudley, көзі
қосылды автор user164226, көзі

6 жауаптар

http://madosthenes.info/blog/534/Crossbrowser-Image-Blur сайтында түсіндірілген техникалар туралы білемін :

1..If you have an image that has the same color on all the outside edges, as in the example above, you could set the background-color of the body or a container element to the same color. (FYI; doesn't really apply to you, at least not in your fiddle).

2 .. Кескіннің шеттерін кесу үшін клип сипатын пайдаланыңыз. клип әрдайым келесі ретпен көрсетіледі:

клип: rect (жоғарғы, сол жақтан оң жақ қысқышты, жоғарыдан, сол жақтан асып кетуді)

Жоғарыда келтірілген мысалда сурет 367px wide × 459 пиксель жоғары және бұлыңғырлық 2 пиксел, осылайша клип келесідей көрсетіледі:

клип: rect (2px, 365px, 457px, 2px);

(Note that clip is only applied to elements that have position: absolute applied to them. If you wanted to gain support in IE8 and earlier, remember to drop the px on the end of the values). (No idea if you're laying out photos in a stack, a grid, or just callouts, etc. Could be appropriate if you can swallow the absolute positioning.)

Кескінді кескіннен сәл кішірек, сыртқы элементке жасырын және суретті сол жаққа жылжытып, сол жаққа көрінетін бұлдырды жою үшін сәл ғана азайтатын элементті (мысалы, мысалы) азайтыңыз .

-

Сондай-ақ, кескін айналасындағы шекараны лақтыру, кем дегенде, Webkit-да көмектеседі, бірақ мен оны кеңінен тексерген жоқпын.

.item img{
    transition:all .5s ;
    border:1px solid #000;
}
5
қосылды
шекара кескіні жұмыс істемейді codepen.io/anon/pen/mymyrG
қосылды автор Toskan, көзі
Шекараны қосу бұлыңғыр жиектерді алып тастайды.
қосылды автор Knelis, көзі
+1 шекараны қосу үшін. Ескертпе, шекараны transparent күйіне орнатуға болады және бірдей жұмыс істейді.
қосылды автор laconbass, көзі
Рақмет сізге! Өкінішке орай, көшіру кезінде бұлыңғыр қырлар пайда болады, тіпті кескін немесе кескіннен кішігірім контейнер болғандықтан соңында жоғалады
қосылды автор Ketri, көзі

Кескінді орнату параметрі мәселені көбірек немесе азайтады. Дегенмен, өткелдің соңында елеулі әсер бар. GPU-ды мәжбүрлеу (translateZ арқылы) проблеманы шеше алады.

CSS

div {
    width:300px;
    height:300px;
    position: absolute;
}
.no {
    left: 400px;
    top: 10px;
}

.box img {
   transition: 2s -webkit-filter;
   position:absolute;
   left: -3px;
   top:-3px;
    clip: rect(5px 295px 295px 5px);
    -webkit-transform: translateZ(0px);
}
div img {
   transition: 2s -webkit-filter;
   position:absolute;
   left: -3px;
   top:-3px;
    clip: rect(5px 295px 295px 5px);
}

div img:hover{
    -webkit-filter: blur(8px);
}

Өзгерістерсіз және өзгеріссіз демонстрация

3
қосылды

SVG-нің бір бөлігі:

 
 
 
 
 

Және кейбір CSS:

 #kitten:hover { filter:url(#blur); }  

Should produce the desired effect. http://jsfiddle.net/5Jk6p/

<div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden">

#kitten:hover {
  filter:url(#blur);
}
 
 
 
 
 
</div> </div>
3
қосылды
Олар linkedin-да қолданатын тәсіл. жақсы жұмыс істейді.
қосылды автор user1518458, көзі

Күні жұмсап болғаннан кейін, мен өзімнің нәзік, қаскүнемді, қоқан-лоққы шешімді құра алдым. Мүмкін бұл нақты жобада қолданылмайды, мүмкін, ол менің шешіміме біреуді қолдануға шабыттандырады, бірақ оны біршама кемірек етеді. Кем дегенде, соңғы нәтиже маған ұнайтын сияқты!

Ақ шекара мен қорап өлшемін қолдану: шекаралық терезе, содан соң соңғы нәтиже өткір жиектерге ие болдым, ал өтпелі кезеңнің жасыл фонын көрсетпеу үшін 3/4 шеттері бар. Егер біреу өтпелі кезеңде кейбір шеттердің артта қалып кетуін анықтаса, бұл көмектесуі мүмкін.

http://jsfiddle.net/fVNqm/2/

html:

<div class="box">
    
   <div class="tophack"></div>
</div>

CSS:

.box{
box-sizing: border-box;
position:relative;
border:3px solid white;
overflow: hidden;
background:green;
width:300px;
height:300px;
}

div img {
transition:.2s all;
position:absolute;
left: -3px;
top:-3px;
}

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

.tophack{ 
background:white;
width:300px;
height:3px;
z-index:10;
position:absolute;
top: 0px;
}

Әлі жақсы нәрсе үміттенеді!

2
қосылды

бұл сіздің CSS қосыңыз

.item img{margin:0px 0px 0px -1px;} 
0
қосылды

Мен осы сілтемені тексеріп, сол жерден шығамын. Javascript туралы ең жақсы бөлік өте мықты идеялар.

http://fabricjs.com/image-filters/

0
қосылды