Question

我有一张想要在x轴上显示的图像，但我不想在y轴上显示重复属性：

enter image description here

我想要显示的图像不是背景，因为我想要另一个图像作为背景图像。这是可能的，如果可以，怎么样？

我的CSS和HTML是：

BODY {background-image: url(/welcome/static/images/register_top2.png); background-position: center top; repeat-x; no repeat-y }
#content {
  width: 700px ;
  margin: 180  auto;

}
#content-container {
  width: 700px ;
  margin-left: 180px;  
}
#image-logo {
  float: right;
}
.has_errors { border: 1px solid #ff0000 }
.errors {color: #ff0000;}

      <!DOCTYPE hml>
                        <html>
                                <head>  <link rel="stylesheet" href="/welcome/static/css/register.css"/>

                                <STYLE TYPE="text/css">



</STYLE> 


                                        <title>{% trans %}Register new distributor{% endtrans %}</title>      <script type="text/javascript" src="/welcome/static/js/jquery-1.7.1.js"></script>

        <script type="text/javascript" src="/welcome/static/js/jquery.popupWindow.js"></script>
                                </head>
                                <body>  

<div id="content"><img src="/welcome/static/images/reg-reg3.gif">
  <div id="content-container">







                                <form action="{{action}}" method="post">

                                               <table><tr><td>

                                                 <label>{% trans %}Soc security number{% endtrans %}</label></td><td>{{ form.soc_sec(size='10', maxlength='10')}}({% trans %}YYMMDDXXXX{% endtrans %})</td></tr>

                                                {% if form.soc_sec.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.soc_sec.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

                                                <tr><td>

 <label for="start">{% trans %}Your sponsor's ID{% endtrans %}</label></td><td>

                         <input id="log1" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log1" size="3" type="text" value="{% if form.sponsor_id.log1.data %}{{form.sponsor_id.log1.data}}{% endif %}" />

                       <input id="log2" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log2" size="3" type="text" value="{% if form.sponsor_id.log2.data %}{{form.sponsor_id.log2.data}}{% endif %}" />
                        <input id="log3" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log3" size="3" type="text" value="{% if form.sponsor_id.log3.data %}{{form.sponsor_id.log3.data}}{% endif %}" />
               <input id="log4" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log4" size="3" type="text" value="{% if form.sponsor_id.log4.data %}{{form.sponsor_id.log4.data}}{% endif %}" />

               (<a class="open_dialog" href="/static/sponsor-id.html">{% trans %}What is a sponsor ID{% endtrans %}?</a>)</td><td></tr>


{% if form.sponsor_id.log1.errors %}


<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.sponsor_id.log1.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
                                                <label>Email</label></td><td> {{ form.email(size='22', maxlength='60')}}  </td></tr>

{% if form.email.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.email.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}



<tr><td>
 <label>{% trans %}First name{% endtrans %}</label></td><td>{{ form.firstname(size='22', maxlength='60')}}</td></tr>

{% if form.firstname.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.firstname.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
 <label>{% trans %}Last name{% endtrans %}</label></td><td>{{ form.lastname(size='22', maxlength='60')}}</td></tr>

{% if form.lastname.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.lastname.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr>
 <td>
 <label>{% trans %}Address{% endtrans %}</label></td><td>{{ form.address(size='22', maxlength='60')}}</td></tr>

{% if form.address.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.address.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
<label>{% trans %}Zip code{% endtrans %}</label></td><td>{{ form.zipcode(size='22', maxlength='60')}}</td></tr>

{% if form.zipcode.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.zipcode.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
<label>{% trans %}City{% endtrans %}</label></td><td>{{ form.city(size='22', maxlength='60')}}</td></tr>

{% if form.city.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.city.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
<label>{% trans %}Phone{% endtrans %}</label></td><td>{{ form.phone(size='22', maxlength='60')}}</td></tr>

{% if form.phone.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.phone.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

</table>


                                        <button>{% trans %}Next{% endtrans %}</button>
                                </form> </div>
 <img id="image-logo" src="/welcome/static/images/snabbreg002.jpg" />

</div><script type="text/javascript"> 
$('.open_dialog').popupWindow({ 
height:500, 
width:700, 
top:325, 
left:400 
}); 
</script>
</body>
                        </html>

Answer 1

像这样写：

body {
  background-image: url(/welcome/static/images/register_top2.png); 
  background-position: center top;
  background-repeat:repeat-x; 
}

或者你也可以这样写：

body {
      background: url(/welcome/static/images/register_top2.png) center top repeat-x; 
    }

Answer 2

background: #FFF url('/welcome/static/images/register_top2.png') fixed repeat-x center top;

Answer 3

要仅水平重复背景图像，请使用css规则

background-repeat: repeat-x;

只有背景可以使用css重复，所以如果你想要两个背景，你可以将一个背景应用于主体，将水平背景应用于div＃content。

<强> DEMO

您还可以使用 CSS3 在同一容器上设置 multiple background images 。语法非常简单，只需对背景css规则使用逗号分隔属性即可。第一张图片是顶部图片：

BODY {
    background-image: url(banner.jpg), url(background.gif);
    background-position: center top; 
    background-repeat: repeat-x, repeat;
}

在上面的示例中，图像“banner.jpg”将仅水平重复并位于顶部，图像“background.gif”将在整个页面的水平横幅下方重复。

<强> DEMO

如何重复图像但只能水平重复？

3 个答案: