Question

这是我的代码，

.main
{
    width:63%;
    background-color:#eee;
    background-image:url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat;
    background-position:top-right;
    float: left;
    margin-left: 0px;  
    padding-left: 3px;  
}

更新

.main
 { 
width:63%; background:#eee; 
background:#eee url("../slice/gray-bg.jpg") repeat top right; 
float: left; 
margin-left: 0px; 
padding-left: 3px; 
}

HTML：

<div class="main">
<div class="section1">
<p id="author1"> Hotel Garden Elysee
<span style="text-align:right;font-size:18px;font-weight: initial;"> - Paris, France</span></p>
<p style="display: inline; font-weight: bold;">January 20 2011 by David LaHuta in <a href="">A Closer Look</a> <p style="margin-left:202px; display:inline"><a href="">(1) Comments<img src="slice/comment-icon.jpg" alt="" /></a></p></p>
<hr style="color: rgb(255, 255, 255); height: 1px;" />
    <img style="width: 100%;" src="slice/image_1.jpg" alt="" />
    <p>non tincidunt augue placerat non.</p>
<p><a href="">More...</a></p>
</div>
<div class="section2">
<p id="author2"> S.Francesco al Monte Hotel 
<span style="text-align:right;font-size:18px;font-weight: initial;"> - Naples, Italy</span></p>

<p style="display: inline; font-weight: bold;">January 29 2011 by David LaHuta in <a href="">A Closer Look</a> <p style="margin-left:202px; display:inline"><a href="">(1) Comments<img src="slice/comment-icon.jpg" alt="" /></a></p></p>
<hr style="color: rgb(255, 255, 255); height: 1px;" />
    <img style="width: 100%;" src="slice/image_2-11.jpg" alt="" />
    <p>non tincidunt augue placerat non</p>
<p><a href="">More...</a></p>
</div>
</div>

但是我无法像下面的图像一样看到左侧的阴影

http://postimg.org/image/wxf6ve2f3/

在上面的链接中，主要内容左侧有阴影。

但对我来说，当我检查督察元素时，它没有显示，

它显示了图像，

请帮我解决这个问题？

Answer 1

您无法设置多个属性，例如background-image上的重复。

应该是background简写，它允许您设置多个属性：

background: #eee url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat;

或者，您可以单独设置：

.main {
    background-color: #eee;
    background-image: url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

Answer 2

由于你的css包含背景图像和背景属性，我认为会有冲突。希望能帮助到你干杯：）

Answer 3

您可以在同一行上编写所有样式：

backgroud: #333 url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat right top;

但如果将它们全部分开可能会更容易理解

    background-color:#eee;
    background-image:url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg");
    background-repeat: no-repeat;
    background-position: right top;

Answer 4

请替换css中的.main课程

.main{
    width:63%;
    background:#eee url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat top right;
    float: left;
    margin-left: 0px;  
    padding-left: 3px;  
}

或

 .main{
     width:63%;
     background:#eee url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") repeat top right;
     float: left;
     margin-left: 0px;  
     padding-left: 3px;  
 }

背景颜色和背景图像在css中不起作用

4 个答案: