Question

嘿家伙我似乎无法让我的背景不重复，甚至得到一个边框来显示这里是代码

HTML:
<div id="content">
  <div class="product">
  <p><strong>Wonderful Guest House</strong></p>
    <p><img src="images/knysna.jpg" width="282" height="171" align="absmiddle" /></p>
    <p>Guest Houses are great alternative accommodation to expensive hotels when         travelling for business or for pleasure. Most guest houses offer &nbsp;the same services as big hotels like cooked meals, airport shuttles, satellite TV, internet connectivity&nbsp; and even conferencing facilities.          </p>
    <p class="style1">>> <a href="#">Visit Website …. </a></p>
  </div>
</div>


CSS:
#content{
width:90%;
margin-top: 60px;
margin-left:5%;
margin-right:5%;
background-color:#CCC;
background-image:url('images/prodblock.jpg')
background-repeat: no-repeat;
}

.product{

width:318px;
display:block;
float: left;
}

老实说，我已经尝试过我可以在网上找到的每一种方式，但无法让这个工作：/我没有看到任何冲突，但我可能会遗漏一些东西。

在我测试的所有浏览器中都会发生这种情况

感谢您事先提出的意见。

Answer 1

您在background-image属性的末尾缺少分号，因此，下一个属性失败，即background-repeat

background-image:url('images/prodblock.jpg');
                                          --^--

Answer 2

试试这个：这是因为float属性。所以我添加了明确的div。你可以用这个作为技巧。

<html>
<head>
<style type="text/css">
#content{
    width:90%;
    margin-top:60px;
    margin-left:5%;
    margin-right:5%;
    background:#ccc url('https://www.google.com/images/srpr/logo4w.png') no-repeat;
}
.product{
    width:318px;
    display:block;
    float: left;
}
</style> 
</head>
<body>
<div id="content">
  <div class="product">
    <p><strong>Wonderful Guest House</strong></p>
    <p><img src="images/knysna.jpg" width="282" height="171" align="absmiddle" /></p>
    <p>Guest Houses are great alternative accommodation to expensive hotels when travelling for business or for pleasure. Most guest houses offer &nbsp;the same services as big hotels like cooked meals, airport shuttles, satellite TV, internet connectivity&nbsp; and even conferencing facilities.</p>
    <p class="style1"><a href="#">Visit Website</a></p>
  </div>
  <div style="clear:both"></div>
</div>
</body>
</html>

CSS背景重复问题

2 个答案: