4

关于背景图像的一些奇怪行为

HTML 

<body>  

<div id="divGaLL">
<ul id="ulGaLL">
<li>...</li>
<li>...</li>
</ul>
</div>  

</body>

CSS 

body{
    background:url(img/back01.jpg); //works
}

#divGaLL{
   background:red;  // works        
   background:url(img/back01.jpg);  //doesn't work
}

#ulGaLL{
    background:url(img/back01.jpg);  //works
}

为什么我不能将back01.jpg设置为背景#divGaLL？

4

7 回答 7

4

那是因为您使用的是相同的属性和不同的值。当您使用时，background:您可以在同一行写入颜色和图像

#divGaLL{
   background:url(http://cdn1.iconfinder.com/data/icons/free-scuba-diving-icon-set/128/fish.png) red;  
}

演示

于 2013-05-21T11:12:59.817 回答
2

你需要使用

background-image: url('img/back01.jpg');

或者例如

background: red url('img/back01.jpg') left top no-repeat;

如果可能的话，尽量坚持这种“论点”的顺序；）

我更喜欢使用第二种方法，但是有时当您只需要更改一件事时，最好只使用第一种方法。

定义高度和宽度并重新声明该元素是块而不是内联样式等始终是一种好习惯，以防止出现不需要的行为，因此请使用以下内容：

display: block;
width: 150px;
height: 150px;
background: red url('img/back01.jpg') left top no-repeat;
于 2013-05-21T11:57:47.053 回答
2

尝试

background:red url(img/back01.jpg) no-repeat;
于 2013-05-21T11:17:10.457 回答
2

该background属性是设置一堆属性的简写，包括background-image. 如果要指定背景颜色或背景图像，而不覆盖其他任何内容，则应background-color完整拼写background-image：

#divGaLL {
   background-color: red;  
   background-image: url(img/back01.jpg);
}

请参阅MDN 上的“背景”。

于 2013-05-21T11:12:22.633 回答
1

解决方案：

#divGaLL{
    width:200px; /* Width of back01.jpg */
    height:200px; /* Height of back01.jpg */
    background-image:url('img/back01.jpg'); 
}
于 2013-05-21T11:20:43.220 回答
1

如果您将图像放入 HTML 中，您可以使用以下内容：

#divGaLL img{ background-color:red;}

它只需要 IMG 而不是整个 div。

是的，不要只使用背景来定义，因为背景用于各种不同的事物，然后只有 img 或颜色。

所以总是使用背景颜色，背景图像或任何你想要的东西

于 2013-05-21T11:23:43.100 回答
1

如果#ulGaLL有一个完全覆盖它的背景图像，那么您将看不到#divGaLL.

于 2013-05-21T11:14:58.283 回答