画像の部分に不透明度を追加する（CSS）

Question

600pxワイド画像の左の100pxにCSSで不透明度を追加するにはどうすればよいですか？それにはcssのプロパティがありますか？

私はオーバーラップdivを追加しようとしましたが、このdivに不透明度を追加しようとしましたが、それは背中の痛みであり、良い解決策には見えません。

Answer 1

まあ私はposition:absoluteで重複するdivは、これはハーフイメージをキャッチするCSSのプロパティがないため、これのための唯一の解決策であることがわかりました。

HTML

<div class="parent"> 
    <div id="opacity_div"></div> 
    <img class="half_fade" src="http://i.stack.imgur.com/W7mPR.jpg?s=32&g=1"> 
</div> 

CSS

.parent{ 
    position:relative; 
} 
#opacity_div{ 
    background:#fff; 
    height:20px; 
    width:20px; 
    position:absolute; 
    top:18px; 
    left:6px; 
    opacity:0.5 /* manipulate to desired opacity */ 
} 
img.half_fade { 
    position:absolute; 
    top:0;left:0; 
    z-index:-1000; 
} 

例：http://jsfiddle.net/JMBFS/81/

チェックアウト、この質問がよりよく理解するために：https://drupal.stackexchange.com/questions/70025/how-to-apply-opacity-to-just-a-portion-of-the-image/70029

Answer 2

解決方法は、位置絶対値とクリッピング（http://codepen.io/anon/pen/jqpwgV）を使用して、イメージ要素と別のイメージ要素をオーバーレイすることです。

HTML：

<img src="img.jpg" id="image-overlay" /> 
<img src="img.jpg" id="image" /> 

はCSS：

#image-overlay{position:absolute;clip: rect(0px,498px,374px,100px);} 
#image{opacity:0.5;} 

あなたは、将来の準備になりたい場合。 clip-pathを使用してCSSを正常に劣化させます。下記のコード（またはhttp://codepen.io/anon/pen/zqLdxW）を参照してください。

#image-overlay{position:absolute; 
    clip: rect(0px,498px,374px,100px); 
    -webkit-clip-path: inset(0px 0px 0px 100px); 
    clip-path: inset(0px 0px 0px 100px); 
    } 
#image{opacity:0.5;}