在设置button的background样式时，会出现如下问题
<html>
<head>
<style type="text/css">
.b{
width:100px;
height:200px;
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}
</style>
</head>
<body>
<p>下面是按钮</p>
<button class="b"></button>
<p>.......</p>
<p>.......</p>
<p>.......</p>
</body>
</html>
将上述代码复制粘贴到这里，开始代码测试。
按钮背景图片没有正常显示，这是为什么？
我们来看一下CSS背景设置的每个参数含义
CSS 背景属性（Background）
| 属性 | 描述 | CSS |
|---|---|---|
| background | 在一个声明中设置所有的背景属性。 | 1 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-color | 设置元素的背景颜色。 | 1 |
| background-image | 设置元素的背景图像。 | 1 |
| background-position | 设置背景图像的开始位置。 | 1 |
| background-repeat | 设置是否及如何重复背景图像。 | 1 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 | 3 |
background 是下面几种的合集
当我们去掉 no-repeat时可以正常显示，图片，当按钮尺寸大于背景图片大小时，背景图片是重复的将按钮铺满。
这不是我们想要的效果，因此
我继续使用排除法，去掉fixed, 图片可以正常显示了。
问题出在，
no-repeat 与 fixed 不能同时设置。并且 no-repeat 与 inherit也不能同时设置。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
