Jak pozbyć się efektu "rozmyć rozmycie" CSS

Mam obecnie kafelek, na którym zawisam jest początkowo niewyraźny. Po zmniejszeniu obrazu ten rodzaj rozmycia ustala się i powoduje niepożądany efekt na kafelku. Proszę spojrzeć na kod, który wkleiłem. Powinien dać ci jasne wyobrażenie o tym, o czym mówię.Jak pozbyć się efektu "rozmyć rozmycie" CSS

Próbowałem poradzić sobie z CSS po i przed obrazem, ale to nic nie zmienia.

.tiles { 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: -ms-flex; 
 
    display: flex; 
 
    -moz-flex-wrap: wrap; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    postiion: relative; 
 
    margin: -2.5em 0 0 -2.5em; 
 
} 
 

 
.tiles article { 
 
    -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease; 
 
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; 
 
    -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease; 
 
    transition: transform 0.5s ease, opacity 0.5s ease; 
 
    position: relative; 
 
    width: calc(33.33333% - 2.5em); 
 
    margin: 2.5em 0 0 2.5em; 
 
} 
 

 
.tiles article > .image { 
 
    -moz-transition: -moz-transform 0.5s ease; 
 
    -webkit-transition: -webkit-transform 0.5s ease; 
 
    -ms-transition: -ms-transform 0.5s ease; 
 
    transition: transform 0.5s ease; 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
    border-radius: 4px; 
 
    overflow: hidden; 
 
} 
 

 
.tiles article > .image img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.tiles article > .image:before {  
 
    -moz-pointer-events: none; 
 
    -webkit-pointer-events: none; 
 
    -ms-pointer-events: none; 
 
    pointer-events: none; 
 
    -moz-transition: background-color 0.5s ease, opacity 0.5s ease; 
 
    -webkit-transition: background-color 0.5s ease, opacity 0.5s ease; 
 
    -ms-transition: background-color 0.5s ease, opacity 0.5s ease; 
 
    transition: background-color 0.5s ease, opacity 0.5s ease; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 1.0; 
 
    z-index: 1; 
 
    opacity: 0.8; 
 
} 
 

 
.tiles article > .image:after { 
 
    -moz-pointer-events: none; 
 
    -webkit-pointer-events: none; 
 
    -ms-pointer-events: none; 
 
    pointer-events: none; 
 
    -moz-transition: opacity 0.5s ease; 
 
    -webkit-transition: opacity 0.5s ease; 
 
    -ms-transition: opacity 0.5s ease; 
 
    transition: opacity 0.5s ease; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    opacity: 0.25; 
 
    z-index: 2; 
 
} 
 

 
.tiles article > a { 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: -ms-flex; 
 
    display: flex; 
 
    -moz-flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -moz-align-items: center; 
 
    -webkit-align-items: center; 
 
    -ms-align-items: center; 
 
    align-items: center; 
 
    -moz-justify-content: center; 
 
    -webkit-justify-content: center; 
 
    -ms-justify-content: center; 
 
    justify-content: center; 
 
    -moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease; 
 
    -webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease; 
 
    -ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease; 
 
    transition: background-color 0.5s ease, transform 0.5s ease; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 1em; 
 
    border-radius: 4px; 
 
    border-bottom: 0; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    z-index: 3; 
 
} 
 

 
    .tiles article > a > :last-child { 
 
     margin: 0; 
 
    } 
 

 
    .tiles article > a:hover { 
 
     color: #ffffff !important; 
 
    } 
 

 
    .tiles article > a h2 { 
 
     margin: 0; 
 
    } 
 

 
    .tiles article > a .content { 
 
     -moz-transition: max-height 0.5s ease, opacity 0.5s ease; 
 
     -webkit-transition: max-height 0.5s ease, opacity 0.5s ease; 
 
     -ms-transition: max-height 0.5s ease, opacity 0.5s ease; 
 
     transition: max-height 0.5s ease, opacity 0.5s ease; 
 
     width: 100%; 
 
     max-height: 0; 
 
     line-height: 1.5; 
 
     margin-top: 0.35em; 
 
     opacity: 0; 
 
    } 
 

 
     .tiles article > a .content > :last-child { 
 
      margin-bottom: 0; 
 
     } 
 

 
body:not(.is-touch) .tiles article:hover > .image { 
 
    -webkit-filter: blur(5px); 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    -ms-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
} 
 

 
    body:not(.is-touch) .tiles article:hover > .image:before { 
 
     background-color: #333333; 
 
     opacity: 0.35; 
 
    } 
 

 
    body:not(.is-touch) .tiles article:hover > .image:after { 
 
     opacity: 0; 
 
    } 
 

 
body:not(.is-touch) .tiles article:hover .content { 
 
    max-height: 15em; 
 
    opacity: 1; 
 
} 
 

 
* + .tiles { 
 
margin-top: 2em; 
 
} 
 

 
body.is-loading .tiles article { 
 
-moz-transform: scale(0.9); 
 
-webkit-transform: scale(0.9); 
 
-ms-transform: scale(0.9); 
 
transform: scale(0.9); 
 
opacity: 0.8; 
 
} 
 

 
body.is-touch .tiles article .content { 
 
max-height: 15em; 
 
opacity: 1; 
 
} 
 

 
@media screen and (max-width: 1280px) { 
 

 
.tiles { 
 
    margin: -1.25em 0 0 -1.25em; 
 
} 
 

 
    .tiles article { 
 
     width: calc(33.33333% - 1.25em); 
 
     margin: 1.25em 0 0 1.25em; 
 
    } 
 

 
} 
 

 
@media screen and (max-width: 980px) { 
 

 
.tiles { 
 
    margin: -2.5em 0 0 -2.5em; 
 
} 
 

 
    .tiles article { 
 
     width: calc(50% - 2.5em); 
 
     margin: 2.5em 0 0 2.5em; 
 
    } 
 

 
} 
 

 
@media screen and (max-width: 736px) { 
 

 
.tiles { 
 
    margin: -1.25em 0 0 -1.25em; 
 
} 
 

 
    .tiles article { 
 
     width: calc(50% - 1.25em); 
 
     margin: 1.25em 0 0 1.25em; 
 
    } 
 

 
     .tiles article:hover > .image { 
 
      -moz-transform: scale(1.0); 
 
      -webkit-transform: scale(1.0); 
 
      -ms-transform: scale(1.0); 
 
      transform: scale(1.0); 
 
     } 
 

 
} 
 

 
@media screen and (max-width: 480px) { 
 

 
.tiles { 
 
    margin: 0; 
 
} 
 

 
    .tiles article { 
 
     width: 100%; 
 
     margin: 1.25em 0 0 0; 
 
    } 
 

 
}

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
 
     <section class="tiles"> 
 
    \t <article> 
 
    \t  <span class="image"> 
 
    \t   <img src="http://cdn.iwillteachyoutoberich.com/wp-content/uploads/2008/11/generic-candy.jpg" /> 
 
    \t  </span> 
 
    \t  <a href="#zaplan" class="portfolio-link" data-toggle="modal" target="_blank"> 
 
    \t   <h2>IrackBot</h2> 
 
    \t   <div class="content"> 
 
    \t    <p>Featured on the official Slack website, IrackBot is built for for Efficient and Manageable Open Source communication across Slack and IRC 
 
    \t    </p> 
 
    \t    <h3> 
 
    \t    <i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i> 
 
    \t    </h3> 
 
    \t   </div> 
 
    \t  </a> 
 
     </article> 
 
    </section> 
 
</body>

Czy można zauważyć nieznaczny unblurring/osiadł obrazu po jego unosił się na i powiększony? Chcę się tego pozbyć i zachować rozmycie.

Źródło

2016-09-02 bholagabbar

widzę przelewowej, która jest przycięta na końcu odcinka. Rozwiązanie może tam leżeć. – isherwood

Tak, więc wiesz, to błąd w Chrome. Nie dzieje się to w Firefoksie. Po prostu dodaj 'filter: blur (5px);' wraz z '-webkit-filter:', a rozmycie zadziała także w FF35 + – pol

Aby uzyskać rozmycie w Firefoksie, wystarczy dodać filter: blur(5px); wraz z, a rozmycie będzie działało również w FF35 +.

Jeśli chodzi o odblokowanie, które się tam pojawia, jest to właściwie błąd występujący w przeglądarce Chrome (i prawdopodobnie w każdej innej przeglądarce internetowej). Nie dzieje się to jednak w Firefoksie.

Aby to naprawić, musisz dodać: transform: translateZ(0);, nie spowoduje to żadnych różnic wizualnych i zajmie się problemem w Chrome.

.tiles { 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: -ms-flex; 
 
    display: flex; 
 
    -moz-flex-wrap: wrap; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    postiion: relative; 
 
    margin: -2.5em 0 0 -2.5em; 
 
} 
 

 
.tiles article { 
 
    -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease; 
 
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; 
 
    -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease; 
 
    transition: transform 0.5s ease, opacity 0.5s ease; 
 
    position: relative; 
 
    width: calc(33.33333% - 2.5em); 
 
    margin: 2.5em 0 0 2.5em; 
 
} 
 

 
.tiles article > .image { 
 
    -moz-transition: -moz-transform 0.5s ease; 
 
    -webkit-transition: -webkit-transform 0.5s ease; 
 
    -ms-transition: -ms-transform 0.5s ease; 
 
    transition: transform 0.5s ease; 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
    border-radius: 4px; 
 
    overflow: hidden; 
 
} 
 

 
.tiles article > .image img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.tiles article > .image:before {  
 
    -moz-pointer-events: none; 
 
    -webkit-pointer-events: none; 
 
    -ms-pointer-events: none; 
 
    pointer-events: none; 
 
    -moz-transition: background-color 0.5s ease, opacity 0.5s ease; 
 
    -webkit-transition: background-color 0.5s ease, opacity 0.5s ease; 
 
    -ms-transition: background-color 0.5s ease, opacity 0.5s ease; 
 
    transition: background-color 0.5s ease, opacity 0.5s ease; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 1.0; 
 
    z-index: 1; 
 
    opacity: 0.8; 
 
} 
 

 
.tiles article > .image:after { 
 
    -moz-pointer-events: none; 
 
    -webkit-pointer-events: none; 
 
    -ms-pointer-events: none; 
 
    pointer-events: none; 
 
    -moz-transition: opacity 0.5s ease; 
 
    -webkit-transition: opacity 0.5s ease; 
 
    -ms-transition: opacity 0.5s ease; 
 
    transition: opacity 0.5s ease; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    opacity: 0.25; 
 
    z-index: 2; 
 
} 
 

 
.tiles article > a { 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: -ms-flex; 
 
    display: flex; 
 
    -moz-flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -moz-align-items: center; 
 
    -webkit-align-items: center; 
 
    -ms-align-items: center; 
 
    align-items: center; 
 
    -moz-justify-content: center; 
 
    -webkit-justify-content: center; 
 
    -ms-justify-content: center; 
 
    justify-content: center; 
 
    -moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease; 
 
    -webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease; 
 
    -ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease; 
 
    transition: background-color 0.5s ease, transform 0.5s ease; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 1em; 
 
    border-radius: 4px; 
 
    border-bottom: 0; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    z-index: 3; 
 
} 
 

 
    .tiles article > a > :last-child { 
 
     margin: 0; 
 
    } 
 

 
    .tiles article > a:hover { 
 
     color: #ffffff !important; 
 
    } 
 

 
    .tiles article > a h2 { 
 
     margin: 0; 
 
    } 
 

 
    .tiles article > a .content { 
 
     -moz-transition: max-height 0.5s ease, opacity 0.5s ease; 
 
     -webkit-transition: max-height 0.5s ease, opacity 0.5s ease; 
 
     -ms-transition: max-height 0.5s ease, opacity 0.5s ease; 
 
     transition: max-height 0.5s ease, opacity 0.5s ease; 
 
     width: 100%; 
 
     max-height: 0; 
 
     line-height: 1.5; 
 
     margin-top: 0.35em; 
 
     opacity: 0; 
 
    } 
 

 
     .tiles article > a .content > :last-child { 
 
      margin-bottom: 0; 
 
     } 
 

 
body:not(.is-touch) .tiles article:hover > .image { 
 
    -webkit-filter: blur(5px); 
 
    filter: blur(5px); /* firefox 35+ */ 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: translateZ(0) scale(1.1); /* Chrome fix - add translateZ */ 
 
    -ms-transform: scale(1.1); 
 
    transform: translateZ(0) scale(1.1); /* Here as well */ 
 
} 
 

 
    body:not(.is-touch) .tiles article:hover > .image:before { 
 
     background-color: #333333; 
 
     opacity: 0.35; 
 
    } 
 

 
    body:not(.is-touch) .tiles article:hover > .image:after { 
 
     opacity: 0; 
 
    } 
 

 
body:not(.is-touch) .tiles article:hover .content { 
 
    max-height: 15em; 
 
    opacity: 1; 
 
} 
 

 
* + .tiles { 
 
margin-top: 2em; 
 
} 
 

 
body.is-loading .tiles article { 
 
-moz-transform: scale(0.9); 
 
-webkit-transform: scale(0.9); 
 
-ms-transform: scale(0.9); 
 
transform: scale(0.9); 
 
opacity: 0.8; 
 
} 
 

 
body.is-touch .tiles article .content { 
 
max-height: 15em; 
 
opacity: 1; 
 
} 
 

 
@media screen and (max-width: 1280px) { 
 

 
.tiles { 
 
    margin: -1.25em 0 0 -1.25em; 
 
} 
 

 
    .tiles article { 
 
     width: calc(33.33333% - 1.25em); 
 
     margin: 1.25em 0 0 1.25em; 
 
    } 
 

 
} 
 

 
@media screen and (max-width: 980px) { 
 

 
.tiles { 
 
    margin: -2.5em 0 0 -2.5em; 
 
} 
 

 
    .tiles article { 
 
     width: calc(50% - 2.5em); 
 
     margin: 2.5em 0 0 2.5em; 
 
    } 
 

 
} 
 

 
@media screen and (max-width: 736px) { 
 

 
.tiles { 
 
    margin: -1.25em 0 0 -1.25em; 
 
} 
 

 
    .tiles article { 
 
     width: calc(50% - 1.25em); 
 
     margin: 1.25em 0 0 1.25em; 
 
    } 
 

 
     .tiles article:hover > .image { 
 
      -moz-transform: scale(1.0); 
 
      -webkit-transform: scale(1.0); 
 
      -ms-transform: scale(1.0); 
 
      transform: scale(1.0); 
 
     } 
 

 
} 
 

 
@media screen and (max-width: 480px) { 
 

 
.tiles { 
 
    margin: 0; 
 
} 
 

 
    .tiles article { 
 
     width: 100%; 
 
     margin: 1.25em 0 0 0; 
 
    } 
 

 
}

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
 
     <section class="tiles"> 
 
    \t <article> 
 
    \t  <span class="image"> 
 
    \t   <img src="http://cdn.iwillteachyoutoberich.com/wp-content/uploads/2008/11/generic-candy.jpg" /> 
 
    \t  </span> 
 
    \t  <a href="#zaplan" class="portfolio-link" data-toggle="modal" target="_blank"> 
 
    \t   <h2>IrackBot</h2> 
 
    \t   <div class="content"> 
 
    \t    <p>Featured on the official Slack website, IrackBot is built for for Efficient and Manageable Open Source communication across Slack and IRC 
 
    \t    </p> 
 
    \t    <h3> 
 
    \t    <i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i> 
 
    \t    </h3> 
 
    \t   </div> 
 
    \t  </a> 
 
     </article> 
 
    </section> 
 
</body>

Źródło

2016-09-02 21:46:53 pol

W Chrome nadal jest artefakt, ale znacznie mniejszy – Matsemann

Dziękuję bardzo. Artefakt jest tam, ale myślę, że jest znacznie mniejszy i łatwiejszy w zarządzaniu. – bholagabbar

Jak pozbyć się efektu "rozmyć rozmycie" CSS

Odpowiedz

Powiązane problemy