Html中button标签设置background问题

来源：互联网发布：766冒险岛数据库进不了编辑：程序博客网时间：2024/06/06 09:50

在设置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也不能同时设置。

0 0