-1

これまでのところ、グラデーションなどのために CSS3 を使用してほとんどの要素をスタイルすることができました。これを再現したい方法で特定のスタイルを正確に実行できない点に到達しました。

その画像をdivの背景画像として使用しています。ここでの問題は、background-size:100%プロパティと値を使用すると、もちろん画像を引き伸ばすことができますが、位置がわずかに移動し、少しぼやけてしまうことです。画像のサイズを変更して、その位置にとどまりながら、品質をそれほど低下させないようにしたいのですが、そのようなことは不可能かもしれないと思います. これを行う最善の方法は、自分が望むものに近づくことだと思います。

4

2 に答える 2

2

CSSを却下するのは少し急いでいると思います...次の行に沿って何かを使用してそれを複製できるはずです:

.css {
    width: 98%;
    height: 13%;
    background: -webkit-linear-gradient(90deg, #2c3439 0%, #2c3439 50%, #667680 70%, #5d6f7b 100%);
    border-top-left-radius: 15px 8px;
    border-top-right-radius: 15px 8px;
    border-bottom-left-radius: 15px 8px;
    border-bottom-right-radius: 15px 8px;
    box-shadow: inset 3px 5px 5px #95aab9, inset -1px -5px 7px #242b2f, 3px 2px 6px #777;
}

イメージ ルートに進みたいと確信している場合は、イメージbackground-size: contain;の縦横比を維持しながら、コンテナーの範囲の少なくとも 1 つを塗りつぶすなどの方法を試してください。

幅と高さ、およびパディングを使用して、コンテナーをできるだけそのアスペクト比に近づけることができます。

background-size画像の CSS バージョンとプロパティの両方を示すこのデモをチェックしてください。

http://jsfiddle.net/GfEA7/

于 2013-10-19T03:20:19.210 に答える
0

画像の品質が低下していません。アスペクト比が変更されているため、見た目が異なり、ぼやけている場合があります。これを防ぐには、ユーザーが一度に高さまたは幅のいずれかのみを変更できるようにし、同時に両方を変更できないようにすることができます。

ユーザーが高さを変更すると、現在のアスペクト比を維持するために幅が自動的に調整されます。ユーザーが幅を変更すると、高さが自動的に調整されます。

于 2013-10-19T03:11:27.197 に答える