html - 透明度に影響を与えずに画像を重ねる

Question

css を使用して画像に色を付けたいのですが、透明部分には影響を与えません。

例: 背景が透明な画像に小さな茶色の正方形がある場合、その正方形のみを別の色に変えたいとします。

このガイド (http://css-tricks.com/forums/discussion/10828/color-overlay-img/p1) を見つけましたが、透明部分にも影響します。

前もって感謝します

Answer 1

あなたができることはあなたが<div>着色したい寸法で画像の下に置くことです。これは私がすることです：

<div class="image">

    <div class="colour"></div>
    <img src="[..].png" alt="Some image" />

</div>

そしてCSS：

.image{
    width: 100px; /* The image width */
    height: 100px; /* The image height */

    position: relative;
}

.image .colour{
    width: 30px; /* Width of the part you want to colour */
    height: 30px; /* Height of the part you want to colour */

    position: absolute;
    top: 35px; /* Y coordinate */
    left: 35px; /* X coordinate */
}

.image img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Place above the coloured part */
}

Answer 2

領域が長方形の場合

• 画像の上に背景色の別の要素を重ねます。

領域が長方形でない場合

• CSS を使用して、適切なタイミングで画像を別の画像と交換します。
• 画像の上に別の画像 (必要に応じて透明なピクセルを使用) を重ねます。
• イメージの上にキャンバスまたは SVG イメージをオーバーレイします。
• 画像にはキャンバスまたは SVG を使用し、必要に応じて画像を編集します。

CSS だけでこれを行う一般的な方法はないと思います (HTML に触れたり、複数の画像ファイルを使用したり、キャンバスや SVG を使用したり、JS や jQuery を使用したりする必要はありません)。HTML ソース コードに触れることができない場合は、JS または jQuery を使用して HTML を動的に変更できます。