6

テキストがスクロールしている間も静止したままの背景を取得しようとしています。また、画像を中央に配置し、タイリングや繰り返しを防ぎます。現状では、どちらかにはできますが、両方にはできません。現在、私のスタイルシートはこのように処理しています。

{
background: url(LOCATION OF PIC FILE) repeat fixed;
height: 610px;
text-align: center;
margin: 0 auto;
overflow: hidden;
}

私が知る限り、高さ: 610px; テキストが上にスクロールできる範囲を制限します。これは維持したいと思います。「繰り返し修正」部分を変更しようとしましたが、希望する結果が得られません。私はこれを試しました...

{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 610px;
}

...これをHTMLに..

<div id="intro">
<img src="IMAGE SOURCE" width="100%" height="100%">
</div>

しかし、これでは背景が固定されません...

任意の助けをいただければ幸いです。

4

4 に答える 4

10

CSS を確認したところ、少し調整するだけで解決できる競合がいくつかあることがわかりました。まず、ブラウザの Web 開発ツール (Firebug など) を使用して変更や微調整を行うことを強くお勧めします。私はそれがあなたの忍耐と欲求不満を救うと思います.

私が思いついた解決策は、次のとおりです。

.body{
    background-image: url('../images/go_here.png');
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position: left top;
    position:absolute;
    height:610px
    width: ?px;
    margin:0;
   }

背景を水平方向に繰り返したい場合は、background-repeat: x-axis; を使用します。垂直方向、背景繰り返し: y 軸;. 背景がスクロールしないようにするには、background-attachment: fixed; を使用します。background-position には、2 つの単語または 2 つの数値測定値を使用する必要があります (例: 中央中央/左上/右上/右上中央/左中央/右下または 0px 0px)。背景に高さを持たせたいので、幅を想定しています。要素の位置は絶対である必要があります。フロートを使用する場合は、メイン コンテナーまたは背景が絶対的である必要があります。

私の提案は、テキストを背景に付けたままにしたい場合、それはあなた次第です. 私の経験では、テキストを背景から分離するのが最善であることがわかりました。長期的には頭痛が少なくなるだけです。次のようにテキストをコーディングします。

  .text{
       text-align: center;
       overflow: hidden;
       height: 610?px;
       width: ?px;
       }

img src と background-image の使用に関しては、私の経験では、それらが競合することがわかりました。何らかの奇妙な理由で、タグの外側に単語またはフレーズがない限り、img src タグは機能しません。両方を使用すると、img src が背景の css 要素をオーバーライドします。CSS で img タグを操作するのは難しいことがわかりました。実行可能ですが、実行するのは悪夢です。

例：

     <div><img src="http://www.example.com">Example</div>

私の経験では、img src が text-indent: -9999px; と連携して動作することがわかりました。または表示: なし;。付けるべき単語または要素がなければ、タグは機能しません。text-indent を使用すると、単語 (つまり、例) が画面から押し出されます。表示: なし; 単語は非表示になりますが、強調表示されている場合は画像の上に表示されます。（それが意味をなさない場合はお詫び申し上げます。いつでも明確にすることができます。）

HTML マークアップについては、img タグまたは div タグのみを使用します。HTML マークアップ:

    <html>
     <body>
      <div class="text">I put my text here.</text>
     </body>
    </html>

これがうまくいくかどうか教えてください。長くなってしまいましたことをお詫び申し上げます。私はそのつもりはありませんでした。問題が発生した場合、またはさらに説明が必要な場合は、お知らせください。手伝っても構わない。

于 2012-10-18T03:41:49.043 に答える
1 
.whateverclassyouwant{background: (url) fixed center no-repeat; margin:0 auto; height:auto}

動作するはずです

于 2012-10-18T00:45:07.800 に答える
0

私はあなたが欠けているのはあなたが持っているということだと思います

    overflow: hidden;

あなたのバックグラウンドで、あなたがあなたのcssでどれがどれに属しているかを切り替えていない限り、divがスクロールすることを許可しません。

オーバーフローをdivで非表示にする場合は問題ありませんが、スクロールバーが表示されます。

このリンクをチェックしてください

于 2012-10-17T20:30:34.100 に答える