戻る
画像を半透明にする
<img>で表示した画像を半透明にしたい場合には、CSS3のopacityプロパティを利用します。opacityは適用先の透明度を0～1の値で指定するプロパティで、「0」で透明に、「1」で不透明になります。
たとえば、記事のパートに表示した画像にopacityを適用し、値を「0.5」と指定すると次のようになります。なお、画像が半透明になったことがわかりやすいように、記事のパートを囲んだ枠の背景には横縞の背景画像（line-gray.png）を表示しています。
opacityプロパティを適用していないときの表示。
article section {clear: both;
border: solid 1px #aaaaaa;
margin: 20px 0 10px;
padding: 18px;
border-radius: 5px;
overflow: hidden;
background: url(line-gray.png);
-webkit-box-shadow: 0px 2px 3px #cccccc,
0px 0px 4px 3px #ffffff inset;
box-shadow: 0px 2px 3px #cccccc,
0px 0px 4px 3px #ffffff inset}
…略…
/* 画像の配置 */
figure {margin: 0}
figure img {opacity: 0.5}
article section:nth-of-type(odd) figure
{float: right;
margin-left: 15px;
margin-bottom: 0}
…略…
opacityプロパティを「0.5」と指定し、画像を半透明にしたときの表示。横幅の背景画像が透けて見えるようになります。