-1

我尝试添加背景图像并使用封面让浏览者调整图像大小。然而，图像非常小，并没有覆盖整个背景。

我是 Angular 的新手，所以我对它的工作原理有一个非常小的想法。

此外，尽管使用 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 问题，而不是特定于角度的问题。#backgroundImage您只需要在您的div上调试您的样式，您将消除使用ng-style.

这是一个关于使用整页 CSS 背景图像的好教程：http: //css-tricks.com/perfect-full-page-background-image/

于 2013-10-21T21:39:22.310 回答