CSS - Arka plan soluk kenarlarını kaldırın

Bu sorunu, resmin kenarlarda kaybolduğu yerde görmüyorum. Kenarlarda kaybolma nedeni, filtre bulanıklığından kaynaklanmaktadır. (Bulanıklık filtresine ihtiyacım var) Soluktan nasıl kurtulduğumu veya css'deki bulanıklık efektini yapmanın başka bir yolunu veya Photoshop'ta bunu yapmak zorunda mıyım?CSS - Arka plan soluk kenarlarını kaldırın

.bg-img{ 
 
\t background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed; 
 
\t background-size: cover; 
 
\t display: block; 
 
\t filter: blur(5px); 
 
\t -webkit-filter: blur(5px); 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 1; 
 
\t padding: 0; 
 
\t margin: 0 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <link rel="stylesheet" href="framside.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="bg-img"></div> 
 
\t </body> 
 
</html>

Bulanıklaştırılmış sürümü arkasında olmayan bir bulanık versiyonunu yığını olabilir

kaynak

2016-04-12 Yonose

Buradan bir göz atın http://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur – Anfuca

Ayrıca, üst, sağ, alt, sola% negatif ile de ofset yapabilirsiniz. Ve sonra ofsetini genişlik ve yüksekliğe% olarak ekleyin. Bu, tabii ki, görüntüyü biraz kırpmakla çok ilgili olmadığını varsayarak.

örn. https://jsfiddle.net/mwzddfs6/

<div class="content"></div> 

.content { 
    overflow: auto; 
    position: relative; 
} 
.content:before { 
    content: ""; 
    position: fixed; 
    left: -1%; 
    right: -1%; 
    top: -1%; 
    bottom: -1%; 
    z-index: -1; 

    display: block; 
    background-image: url(http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg); 
    background-size: cover; 
    width: 102%; 
    height: 102%; 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
}

ps: önce, kod temiz kalmasına: Ben de içeriği kullanmayı tercih eder. kişisel tercih, hepsi.

kaynak

2016-04-12 07:12:54 praveensewak

Teşekkür ederim, harika çalışıyor! – Yonose

.bg-img-solid{ 
 
\t background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed; 
 
\t background-size: cover; 
 
\t display: block; 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 1; 
 
\t padding: 0; 
 
\t margin: 0 
 
} 
 

 
.bg-img{ 
 
\t background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed; 
 
\t background-size: cover; 
 
\t display: block; 
 
\t filter: blur(5px); 
 
\t -webkit-filter: blur(5px); 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 1; 
 
\t padding: 0; 
 
\t margin: 0 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <link rel="stylesheet" href="framside.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="bg-img-solid"><div class="bg-img"></div></div> 
 
\t </body> 
 
</html>

Ben sadece çoğaltılamaz ve sonra ebeveynden bulanıklığı kaldırıldı

div.

kaynak

2016-04-12 06:56:58 Scott

Bunu düşündüm ama daha iyi bir yol olmalı? – Yonose

CSS - Arka plan soluk kenarlarını kaldırın

cevap

İlgili konular