如何重復圖像但只能水平重復？
[英]How to repeat an image but only horizontally?
問題描述
我有一個我要在x軸上顯示的圖像，但我不想在y軸上重復屬性：
因為我希望將另一張圖像作為背景圖像，所以我希望圖像不會顯示為背景。 這是可能的，如果是的話，怎么樣？
我的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>
3 個解決方案
解決方案1
10 已采納 2012-02-27 09:29:07
像這樣寫：
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;
}
解決方案2
3 2012-02-27 09:31:18
background: #FFF url('/welcome/static/images/register_top2.png') fixed repeat-x center top;
解決方案3
3 2012-02-27 09:31:19
要僅水平重復背景圖像，請使用css規則
background-repeat: repeat-x;
只有背景可以使用css重復，所以如果你想要兩個背景，你可以將一個背景應用於主體，將水平背景應用於div＃content。
您還可以使用CSS3在同一容器上設置多個背景圖像 。 語法非常簡單，只需對背景css規則使用逗號分隔屬性即可。 第一張圖片是頂部圖片：
BODY {
background-image: url(banner.jpg), url(background.gif);
background-position: center top;
background-repeat: repeat-x, repeat;
}
在上面的例子中，圖像“banner.jpg”將僅水平重復並位於頂部，圖像“background.gif”將在水平橫幅下方的整個頁面中重復。
是否可以使背景圖像垂直重復。 但是，使用CSS也只是水平向右側？
[英]Is it possible to make a background image repeat vertically. But, also horizontally only to the right side using CSS?
CSS如何水平重復背景圖片並始終將其放在網頁底部？
[英]CSS How do i repeat a background image horizontally and always keep it at the bottom of a webpage?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.