Question

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

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的背景？

Answer 1

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

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

<强> DEMO

Answer 2

background属性是设置一组属性的简写，包括background-image。如果您想指定背景颜色或背景图片而不覆盖任何其他内容，则应完整拼写background-color和background-image：

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

请参阅"background" on MDN。

Answer 3

尝试

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

Answer 4

您需要使用

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

或者例如

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

尝试坚持＆＃34;参数＆＃34;的这个顺序如果可能的话;）

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

定义高度和宽度始终是一个好习惯，并重新声明此元素是块而不是内联风格等，如果可能的话，以防止不必要的行为，所以使用类似的东西：

display: block;
width: 150px;
height: 150px;
background: red url('img/back01.jpg') left top no-repeat;

Answer 5

如果#ulGaLL的背景图片完全覆盖了它，那么您将看不到#divGaLL的背景。

Answer 6

<强>解决方案：

#divGaLL{
    width:200px; /* Width of back01.jpg */
    height:200px; /* Height of back01.jpg */
    background-image:url('img/back01.jpg'); 
}

Answer 7

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

#divGaLL img{ background-color:red;}

只需要IMG而不是整个div。

是的，不要只使用背景来定义，因为背景用于所有不同的东西，然后只有img或color。

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

无法为特定div设置背景图像

7 个答案: