Question

使用materialize.css（http://materializecss.com），需要将图像设置为输入表单的背景，因此在调整窗口大小时图像应该调整大小。现在它看起来像：当浏览器窗口半屏大小如下：当浏览器窗口最大化时，它看起来很糟糕：我希望你能得到主意，对不起我的英语。所以我需要适合该表单的html代码。提前谢谢。

更新：我的HTML代码：

<div class="container">

    <div class="row col s12">
        <div class="row col s8 offset-s2 white z-depth-3">

            <div style='float: left; width: 100%; overflow: hidden; background: url("../static/assets/images/envelope.png") center center no-repeat;' class="col s12">

                <div class="row">
                    <h5 class="center">Адрес для получения посылки:</h5>
                </div>
                <div class="row">
                    <div class="input-field col s5 offset-s1">
                        <input id="firstName" type="text" class="validate"/>
                        <label for="firstName">Имя</label>
                    </div>
                    <div class="input-field col s5">
                        <input id="lastName" type="text" class="validate"/>
                        <label for="lastName">Фамилия</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s5 offset-s1">
                        <input id="country" type="text" class="validate"/>
                        <label for="country">Страна</label>
                    </div>
                    <div class="input-field col s5">
                        <input id="zipCode" type="text" class="validate"/>
                        <label for="zipCode">Индекс</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s5 offset-s1">
                        <input id="city" type="text" class="validate"/>
                        <label for="city">Город</label>
                    </div>
                    <div class="input-field col s5">
                        <input id="street" type="text" class="validate"/>
                        <label for="street">Улица</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s2 offset-s1">
                        <input id="house" type="text" class="validate"/>
                        <label for="house">Дом</label>
                    </div>
                    <div class="input-field col s2">
                        <input id="room" type="text" class="validate"/>
                        <label for="room">Квартира</label>
                    </div>
                </div>
                <div class="row center">
                    <a class="waves-effect waves-light btn"><i class="material-icons right">send</i>Сохранить</a>
                    <br/>
                </div>

            </div>
        </div>
    </div>
</div>

Answer 1

CSS中的最小宽度为您的图像？

<div style='min-width: XXXpx; float: left; width: 100%; overflow: hidden; background: url("../static/assets/images/envelope.png") center center no-repeat;' class="col s12">

其中XXX是您的内容的宽度+图像边框约为30px。

将背景设置为div标签，materialize.css

1 个答案: