7

ブラウザを広くすると、画像の右側と左側が黒くフェードアウトしていることがわかります。

ギャラリーに同じ機能を適用する必要がありますが、わかりません。この>>リンクも見つけましたが、水平線だけでは、画像の両側に貼り付けてリンクと同じ結果を得る方法がわかりません。

コメントの中で、ultranautは画像にフィルターを適用できると述べましたが、問題は、ブラウザーウィンドウのサイズが異なる可能性があり、画像側をすべてのブラウザーで調整できるため、画像にフィルターを適用するとサイズを調整する方法です。サイズ。

4

2 に答える 2

11

この猫の皮を剥ぐ方法の1つは次のとおりです。

HTML：

<div class="frame">
  <div class="fade"></div>
  <img src="picture.jpg" alt=""/>
</div>

CSS：

.frame {
    width: 315px;
    height: 165px;
    margin: 20px;
    position: relative;
}

.fade {
    height: 100%;
    width: 100%;
    position:absolute;
    background: -webkit-linear-gradient(left, 
                rgba(0,0,0,0.65) 0%, 
                rgba(0,0,0,0) 20%,
                rgba(0,0,0,0) 80%,
                rgba(0,0,0,0.65) 100%
    );
}

個人的には、私は（意味的に）不要なfadedivの大ファンではありません。おそらく、それなしで同じ効果を実行するためのより賢い方法があると確信していますが、それは機能します。

私はwebkitプレフィックスルールのみを含めました。合法的に取得したい場合は、他のベンダープレフィックスを追加する必要があります。

ここでフィドル。

更新：リンクされた例の場合のように、画像が背景として機能している場合は、グラデーションと画像の両方を、含まれている要素のcssに設定できます。

.frame {
  width: 315px;
  height: 165px;
  margin: 20px;

  background-image: url(picture.jpg);
  background-image: -webkit-linear-gradient(left, 
    rgba(0,0,0,0.9) 0%, 
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0.9) 100%
  ),
  url(picture.jpg);
}

...

<div class="frame">
  Content...
</div>

煩わしさや煩わしさを軽減：ベンダープレフィックスなどを備えた新しいスタイルのフィドル。

于 2013-03-19T00:40:25.310 に答える
2

CSS3だけを使用して、Vignetteを試してください。

逐語的コード：

HTML：

<p class="vignette"><img src="image.jpg"></p>

CSS：

p.vignette {
  position: relative;
}
p.vignette img {
 display: block;
}
p.vignette:after {
 -moz-box-shadow: inset 0 0 10em #666;  
 -webkit-box-shadow: inset 0 0 10em #666;   
 box-shadow: inset 0 0 10em #666;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}
于 2013-03-19T00:05:56.227 に答える