0

カルーセルのコンテンツをページの中央に配置し、背景を固定してブラウザのサイズ変更に基づいて高さ/幅を変更したいと考えています。

私が持っているコードから、どうすればそれを達成できるか教えてください。

4

3 に答える 3

1

追加

text-align:center;

体にそして取り除く

left:50%;

ulから、ラウンドアバウトの中心になります。

背景画像については、divを100％幅、位置絶対、上下0pxに設定し、画像を100％幅に設定して動的に拡大縮小できますが、CSS3のより良いアプローチについては、csstricks.comをご覧ください。そこに非常に良いチュートリアルがあります。

http://css-tricks.com/perfect-full-page-background-image/

于 2012-08-23T21:38:01.187 に答える
1

上記のソリューションには垂直方向と水平方向の両方のセンタリングが含まれていないため、これを達成しようとしている場合は、これをulクラスに追加してください

ul {

 list-style: none;
 padding: 0;
 margin: -15em 0 0 -31em;
 width: 62em;
 height: 30em;
 background-color: #0C0C0C;
 top: 50%;
 left: 50%;

}

完全にサイズ変更可能な背景については、FrontEndJohnソリューションを使用します。画像が伸びすぎないように、本文に最小幅と最小高さを追加することを忘れないでください。

于 2012-08-23T21:45:45.740 に答える
1

センタリングするにleft: 50%;は、ulcss の を削除します。

背景には、次の css を使用します。

body
{
    background-image: url('replaceme');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;

}

必要な画像に置き換えreplacemeます。

注: バックグラウンド CSS には、古い Internet Explorer では機能しない可能性のある CSS3 アーティビュートがいくつかあります。CSS3 を使用したくない場合は、このサイトの使用を検討して ください:

于 2012-08-23T21:34:59.480 に答える