2

私は完全な初心者です。私は解決策を探すために最善を尽くしましたが、問題の一部は、私がやろうとしていることの専門用語が何であるかさえ知らないことです.

基本的に、タイル張りの背景をどこでも繰り返す必要がありますが、ページの上部から下部まで伸び、水平画面スペースの約 50% を占める白い長方形も必要です。これを達成するにはどうすればよいですか？

4

4 に答える 4

0

解決策 1

ドキュメント本文に適用される CSS プロパティのみを使用するソリューションを次にbackground示します。追加の要素は必要ありません。何が起こっているのかを理解できるように文書化されています。

body
{
    /*
    * This specifies two background images, separated by comma
    * First parameter is just a white pixel
    * For the second use any background pattern of your choice
    */
    background-image:url("http://i.imgur.com/qdx0kzd.png"),  
    url("http://subtlepatterns.com/patterns/tasky_pattern.png");

    /*Center background images, self-explanatory*/
    background-position: center;
    /*Repeat white background image on Y-axis (vertical) only*/
    background-repeat: repeat-y, repeat;
    /*Make white background size 50%. Adjust as needed*/
    background-size: 50%, auto;
}

このフィドルで例を見ることができます: http://jsfiddle.net/dV2zZ/6/

解決策 2

このソリューションでは、さまざまな要素にさまざまな背景を適用します。パターンはドキュメント本体に、白い背景はコンテンツ コンテナーに適用されます。理解を深めるために、コードも文書化されています。

HTML

<div id="content">Content</div>

CSS

html, body
{
    margin: 0;

    /* Make document size extend to the bottom of the page */
    height: 100%;
}

body
{
    /*Patern background. Use a pattern of your choice*/
    background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}

#content
{
    /*Make container background white*/
    background-color: #FFFFFF;
    /*Center container*/
    margin: 0 auto;
    /*Size 50%, adjust as needed*/
    width: 50%;
    /*Extend to the bottom*/
    height: 100%;
}

ここでフィドルの例を参照してください: http://jsfiddle.net/jDRG3/1/

于 2013-06-10T01:59:27.043 に答える
0

これがあなたの望むものであることを願っています。これはタイル張りの繰り返しの背景で、白いストリップが画面スペースの半分で、中央に下がっています。タイル張りの背景が必要な場合は、CSS で何も定義する必要はありません。CSS がそれを行いますが、ブラウザーの互換性については確信が持てないため、明示的に定義する方が安全かもしれませんrepeat:。

まず第一に、それが機能しないと不満を言う人は、 の divはその親要素(この JSFiddle の場合は div を囲むコンテナー) のにすぎないことheight: 100%に注意してください。したがって、親にコンテンツがない場合、高さが 100% の div は非表示になります。height: 100%height: 100%#container

したがって、この JSFiddle で白いストリップの高さが 100% になるにはhtml、bodyとcontainerがすべて必要です。height: 100%

JSFiddle

この後、白いストリップにコンテンツを自由に追加できます。これはおそらくあなたのウェブページになります! :D

注:ここではストリップを次のように定義してwidth: 50%;いますが、幅 ( ) を明示的に定義した方がよい場合もありますwidth: 1200px;。これにより、ズームイン、ズームアウトなどの際にテキストと div が混乱する問題を回避できます。

編集: また、div などのコンテンツを追加するとコンテナーの高さが増加するため、白いストリップがページの下部に到達しないという問題は、それを埋めるものが何もないことです。コンテンツを追加すると、ストリップは自然に拡大してページを埋めます。幸運を！

于 2013-06-10T04:52:43.440 に答える
0

これはかなり基本的な内容です。先に進む前に、HTML と CSS の初心者向けコースを受講することをお勧めします。

body {background: url(tile.png) left top repeat;}

content {background-color: #fff; margin: 0px auto; width: 50%;}
于 2013-06-10T01:48:45.287 に答える
0

私が正しく理解できれば、ページの背景を繰り返してから、<div>白い背景で絶対に配置することができます。

于 2013-06-10T01:46:32.647 に答える