html - CSS3を使用してJPG画像を透明にフェード

Question

.JPG透明度のないソリッド イメージ aがあります (.JPGはアルファ レイヤーを持つことができないため)。ただし、クライアントはイメージの 1 つのエッジを透明にフェードするイメージを作成する機能を持たないため、ソリッドを入力し、.JPGコードを介してフェードさせたいと考えています。この画像はタグのものでbackgroundはなく、現在のものに設定されていることに注意してください。これは CSS3 で可能ですか。src<img>

画像例:

望ましい結果:

Answer 1

CSS マスキングを介して真の透明性を得ることができます。

http://www.webkit.org/blog/181/css-masks/

ただし、そのサポートはまだかなり制限されています。ただし、Webkit ブラウザーでは、次のようなものを使用できます。

.masked {
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

<div class="masked">Your content here</div>

これは、div 内のすべてのコンテンツ (背景を含む) で機能しますが、ほとんどのブラウザーでは機能しません。

Nivo Sliderに似たスライスとアニメーションのアプローチを使用することもできますが、それは有用な効果にならない可能性があるため、非常に多くの作業になります。

Answer 2

CSS3背景とともにCSS3 属性で何かできると思います：mask-imagelinear-gradient

-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0))

これが私があなたに作成したサンプルです。新しいCSS3のことなので、互換性のあるブラウザは現時点では Chrome と Safari ( Webkit ブラウザ) です。

Answer 3

img,.over{
width:100px;
height:100px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
position:absolute;
}​


<div  >
<img src="http://ts1.mm.bing.net/th?id=I.4763892546143716&pid=1.1" alt="test"/>
<div class="over"></div>
</div>

デモ