web-dev-qa-db-ja.com

CSSで画像または背景画像の端をぼかす

新しい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);
htmlcsscss3filter
23
Startec

探しているのが画像の端をぼかすことだけである場合は、インセットでボックスシャドウを使用できます。

作業例： http://jsfiddle.net/d9Q5H/1/

Screenshot

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;
}
80
Leonardo

視覚的な最終結果がどうなるかは完全にはわかりませんが、画像のエッジをぼかす簡単な方法は次のとおりです。

ここでの作業例：http://jsfiddle.net/ZY5hn/1/

Screenshot

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;
}

ぼかし効果は画像を使用しているため、画像の色によって変化します。

これがお役に立てば幸いです。

17
Leonardo
<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>
0
Sunny