0

私はこれに少し慣れておらず、私のコードはまだ開発中です。レスポンシブ ポートフォリオ サイトを構築しようとしています。レスポンシブ ギャラリー、モバイル用のドロップダウン メニューに分割するナビゲーション、およびメディア クエリを使用して調整することになっている縁取りされた背景をつなぎ合わせ、ナビゲーションの下に配置しますが、ギャラリーを囲んでいます。

私の問題は、img.bg として設定した縁取りされた背景にあります。基本的には、サイズが標準の画面サイズになったときに、画像を交換して img.bg2 & 3 に置き換えようとしています。これを行うには、style.css の可視性プロパティを使用します。私はそれをある程度機能させていましたが、今では完全に混乱しています。助けや提案があれば大歓迎です!

最新の例をオンラインで投稿しました: www.ververserver.com

乾杯。

4

3 に答える 3

0

テアオンに同意します。あなたは全体の問題を複雑にしすぎています!

background-size:cover;

新しい CSS3 プロパティ。指定された要素を常に画像で覆います。画面サイズは問いません。

于 2013-08-16T00:40:15.430 に答える
0

それで、私はこの記事も読みました。

そして、500px と 1824px で機能するように見える解決策を思いつきましたが、1024px では背景画像が元のファイルよりも大きくなります。これまでに drop-basic.css ファイルにあるコードを次に示します。

body { 
background-image: url("images/SQlarge.svg");
background-size: cover;
background-repeat: no-repeat;
background-size: cover;
}

@media only screen 
and (max-width : 1024px) 
{
body { 
background-image: url("images/SQ1024.svg");
background-size: cover;
background-repeat: no-repeat;
background-size: cover;
}
}

@media only screen 
and (max-width : 500px) 
{
body { 
background-image: url("images/SQmobile.svg");
background-size: cover;
background-repeat: no-repeat;
background-size: cover;
}
}

img, audio, video, canvas { max-width: 100%; }

.container { 
    max-width: 80em;
    width: 88%;
    margin-left: auto; 
    margin-right: auto;
}

サイトは www.ververserver.com で見ることができます。ありがとう

于 2013-08-16T22:36:44.333 に答える