0

バレンタインデーのアプリを作っているとしましょう。心をピンクで0から100まで満たして、他の人への愛を示してほしい。

画像の高さは102ピクセルになり、誰かが「恋をしている」％ごとに、1ピクセルの高さの線を這い上がらせます。

私のアプローチは次のとおりです。Photoshopに移動し、心臓の内側の「背景」を削除して、内側が透明になるようにします。周囲の心臓の部分は白く塗られます。背景が白のサイトに配置します。画像を102x（何でも）divに配置し、背景色がピンクの別のdivを内部に配置します。その場合、子divの高さを増やすだけです。

これはいいのですが、背景が白のサイトでしか使えません。ピンクになるのを防いでいるのは白だからです。つまり、Webページの背景色を変更しながら、この心を満たしていく方法が必要です。

4

2 に答える 2

3

通常どおり背景を透明にして中央を塗りつぶすようにハートを作成します。これをdivの背景画像として使用し、下部に配置します。

以下の例は、40％の心臓を示しています。

HTML

<div class="heart-wrap">
    <div class="heart" style="height: 40px; margin-top: 60px;"> 
    </div>
</div>

CSS

.heart,
.heart-wrap {
    width: 100px;
    height: 100px;
}
.heart {
    background: transparent left bottom url('/heart.png');
}

デモ： http： //jsfiddle.net/UFBjh/

デモ2： http：//jsfiddle.net/L5uDp/

于 2012-09-24T19:07:31.827 に答える
2

このデモをご覧ください。これはおそらくあなたが望むものです - http://jsfiddle.net/Rhpyp/

解決策には、 http: //www.webfroze.com/css/heart-shape/ に記載されている手法を使用して、CSS3 を使用してハートを描くことが含まれます。

そして、必要に応じて外側の div でハートの部分的な非表示を処理します。

ここに画像の説明を入力

ハートの色と、それを部分的に隠すために使用される DIV は、CSS で編集できます。

于 2012-09-24T19:27:42.333 に答える