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

【问题标题】：background color and background image is not working in css背景颜色和背景图像在 css 中不起作用
【发布时间】：2016-02-23 09:34:40
【问题描述】：

这是我的代码，

.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/

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

但对我来说，当我签入检查器元素时，它没有显示，

它显示了该图像，

请帮我解决这个问题？

【问题讨论】：

background-image: url("images/plaid.jpg") no-repeat; wont show up的可能重复

标签： html css

【解决方案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;
}

【讨论】：

那么背景色？
@selva 你确实可以，我已经在上面的编辑中添加了它。
谢谢，但在我的页面中没有显示阴影。这是我的输出截图s15.postimg.org/4ubwltu7v/untitled.jpg

【解决方案2】：

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

【讨论】：

【解决方案3】：

请用 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;  
 }

【讨论】：

但我仍然无法准确理解，正如我在上面的屏幕截图中提到的那样
你可以重复背景图片
如果我使用重复它显示水平居中.. 像这样s14.postimg.org/spsaq8eb5/untitled.jpg
.main { 宽度：63%;背景：#eee;背景：#eee url("../slice/gray-bg.jpg") 重复右上角；向左飘浮;左边距：0px；填充左：3px； }
谁能帮帮我？请

【解决方案4】：

你可以像这样在同一行写所有样式：

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;

【讨论】：