-1

背景画像を追加し、カバーを使用してブラウズした画像のサイズを変更しようとしました。ただし、画像は非常に小さく、背景全体をカバーしていません。

私は角度が初めてなので、これがどのように機能するかについて非常に小さな考えがあります。

また、zurb を使用してスペースを管理しているにもかかわらず、検索バーが中央に表示されません。

ページの外観は次のとおりですここに画像の説明を入力

コードは次のとおりです。

<div >

    <!-- Above fold -->
    <div class="row">

        <div id = "backgroundImage" class="large-12 small-12 columns" ng-style="{'background-image':'url(img/mainBackground.png)','background-size' : 'cover'}">

            <!-- search bar -->
            <div class="row">

                <!--empty -->
                <div class="large-3 small-3 columns">
                    &nbsp;
                </div>

                <div class="large-6 small-6 columns">
                    <input type="text" id="searchBar" ng-style="{'width': '50%'}">
                </div>

                <!--empty -->
                <div class="large-3 small-3 columns">
                    &nbsp;
                </div>

            </div>

        </div>
    </div>

</div>
4

1 に答える 1

1

@Marko の応答に加えて、Angular を使用して属性のスタイルを設定していますが、提供しているスタイルは静的です。Angular のng-style属性は、特定の条件に基づいて実行時に適用する動的なスタイルがある場合に使用することを目的としています。あなたはそれをしていません。適用したい静的スタイルをインラインで提供しているだけです。それは実際にはベストプラクティスとは見なされません。必要なことを行うには、静的な css スタイルシートを使用することをお勧めします。

そうは言っても、直面している問題は純粋に CSS の問題であり、角度固有の問題ではありません。div でスタイルをデバッグするだけ#backgroundImageで、使用に伴う多くの複雑さが解消されますng-style。

フルページ CSS 背景画像の使用に関する優れたチュートリアルは次のとおりです: http://css-tricks.com/perfect-full-page-background-image/

于 2013-10-21T21:39:22.310 に答える