斜めサムネイルや絵

Question

。あなたはどのようにCSSやjavascriptのソリューションでこのように見えるように画像を取得しますか？使用

おかげで、リチャード上記のリンクのウェブサイトのような透明な背景を持つ

Answer 1

クロップ画像

CSSのみ（WebKitのブラウザでhttp://www.arnaudbeelen.be/wp-content/uploads/2012/03/voeux2012.jpg

Answer 2

のみ - それは他でも可能である場合で掘るする必要がありますブラウザしかし、私はそれを疑う）：

http://jsfiddle.net/536S8/

<div class="image-thumbnail"> 
    <img src="myimage.jpg" alt="" /> 
</div> 

.image-thumbnail { 
    width:500px; 
    height:250px; 
    -webkit-mask-image: url('mymaskimage.png'); 
    -webkit-mask-repeat:no-repeat; 
    -webkit-mask-position:0 0; 
} 

あなたの画像の上にマスク層を有することにより

と別のアプローチは、（余分なマスクのdivを必要とする - あなたのマスク画像は、背景と同じ色にする必要があり）：

http://jsfiddle.net/PCfWa/

<div class="image-thumbnail"> 
    <div class="image-mask"></div> 
    <img src="myimage.jpg" alt="" /> 
</div> 

.image-thumbnail { 
    position:relative; 
    width:500px; 
    height:250px; 
    overflow:hidden; 
} 
.image-mask { 
    position:absolute; 
    width:500px; 
    height:250px;   
    z-index:2; 
    background:url(mymask.png) no-repeat 0 0; 
    } 

Answer 3

をあなたは、画像マスクを作成することができます一部の領域は背景色と透明な可視領域で塗りつぶされ、元の画像の上にオーバーレイされます（絶対配置とz-indexを使用）。選択可能/クリック可能でなければならないテキストがある場合は、マスクと同じテクニックを使用して、マスクの上の新しい要素に入れてください。ただし、マスクは大きい方が、z-indexの値が大きくなります。