`

background背景图片png的相关问题

 
阅读更多
http://zhidao.baidu.com/question/534583330.html
background: url("/static/home/index/img/body_back_3107edb8.png") repeat-x scroll 0 95px transparent; 
求解释 repeat-x scroll 0 95px transparen分别是什么意思。
-----------------------------
简单来说,这是background 属性的一个简写形式,它用来设置所有的背景属性。
想理解它,我们从原理来说,比较好理解一些,先来看看background可以按顺序设置哪些属性:
background-color   规定使用的背景颜色
background-image    规定使用的背景图像
background-repeat   规定如何重复背景图像
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-position      规定背景图像的位置
inherit        规定应该从父元素继承 background 属性的设置

如果不设置其中的某个值,也是被允许的,只要跳过不写即可。
现在对照楼主的样式,就好理解啦~~
url:设置背景图片的地址,也就是background-image
repeat-x:对应的就是background-repeat如何重复背景图像,这里的重复方式是横向平铺,与之对应的还有repeat-y竖向平铺,如果想水平和垂直方向都重复,那么只要写repeat 即可。
scroll:对应的就是background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动,这里就是规定背景图像随着页面的其余部分滚动,如定义fixed则是规定背景图像固定。
0 95px:这两个值要一起来看。background-position 规定背景图像的位置,第一个是水平位置,第二个是垂直位置,所以,这两个值就是定义背景图像从水平位置0,垂直位置95px这样的一个位置(再结合上面的repeat-x)开始横向平铺。
transparent:这个从单词就可以看出来是定义透明,这个没有上面的属性来对应,我们平时定义背景图像时,是不需要写它的,因为不写就是这个默认值。

#nav {
background: url("http://misc.360buyimg.com/lib/skin/2012/i/20111221C.png") repeat-x scroll 0 -315px #D00000;
height: 40px;
}

就是找到20111221C.png图片,左上角是0 -315px,没图片处使用#D00000替换,做repeat-x方向平铺,高度使用图片的Y轴范围时:-315+40(下面的hight决定)

background-position:500px 15px;
背景图片从容器(container)左上角的地方向右移500px,向下移15px,超出的部分隐藏。

background-position:-500px -15px;
背景图片从容器(container)左上角的地方向左移500px,向上移15px,超出的部分隐藏。
分享到:
评论

相关推荐

    IE下background背景图片无法显示问题解决方法

    查找了很久,发现是图片格式问题,把png格式的转换成gif的就没有问题了。。。。 附相关代码,主要是html的: 复制代码代码如下: <style type=”text/css”> .select{ width:180px; height:29px; overflow:...

    小程序background引入图片展示不完整.zip

    当使用`background-image`属性设置背景图片时,如果图片路径不正确或未正确加载,可能会出现只显示部分图片的情况。 1. **图片路径错误**: - 确保图片路径的正确性。在小程序中,图片路径可以是相对路径或绝对...

    设置背景色解决png图片设置background不显示问题

    设置一个背景图片png格式,该图片是黑白色的,但是由于body背景色设置为黑色,所以那个背景图片的白色就会被掩盖掉,这个时候我们可以给这个div设置一个背景色,比如说#666,然后背景色的白色部分就能显现出来啦

    关于背景图片的定位(background-position)

    首先,`background-position`属性允许我们将背景图片放置在元素的任意位置,而不仅仅局限于居中、顶部或底部。它接受不同的值,如像素、百分比、关键词等,以决定图像相对于元素边界的偏移量。例如,`background-...

    layui弹出层样式修改,使用css的background属性设置多个背景图附件

    本话题将详细探讨如何在layui中修改弹出层的样式,特别是如何使用CSS的`background`属性来设置多个背景图片。 首先,我们需要理解layui弹出层的工作原理。layui的弹出层是通过JavaScript动态生成HTML元素实现的,...

    IE6png背景图片透明

    在早期的网页设计中,IE6(Internet Explorer 6)浏览器对PNG图片格式的支持存在一些问题,特别是对于PNG-24格式的图片,它无法正确处理半透明效果,导致背景图片出现不透明或颜色错误。这给网页设计师带来了困扰,...

    解决IE6下PNG图片背景色不透明问题的方法

    在互联网的早期,Internet Explorer 6 (IE6) 是广泛使用的浏览器之一,但它存在许多兼容性问题,其中之一就是PNG图片的背景透明问题。PNG(Portable Network Graphics)是一种支持透明度的图像格式,但在IE6中,对于...

    css代码添加背景图片常用代码

    这段代码将`pattern.png`背景图片仅在水平方向上重复显示。 **注意**: 如果希望背景图片只显示一次而不重复,则使用`no-repeat`;如果希望图片沿某一轴线重复,则可以使用`repeat-x`或`repeat-y`。 #### 四、固定...

    可以动态加载本地PNG图片按钮实例

    在IT行业中,动态加载本地PNG图片到按钮是一个常见的需求,特别是在开发用户界面丰富的应用程序时。PNG图片因其高质量、透明度支持等特性,被广泛应用于GUI设计。本实例着重讲解如何在程序中实现这一功能,特别是在...

    textarea添加背景图片并控制定位

    首先,要为`textarea`设置背景图片,可以使用`background-image`属性。例如: ```css textarea { background-image: url('gb.png'); } ``` 这里的`url('gb.png')`指定了背景图片的路径,它应该与HTML文件在同一...

    网页中PNG图片透明的几种解决方式

    如果需要背景图片能够平铺,还需额外处理。 #### 方法二:JavaScript解决方案 对于更复杂的需求,如处理动态加载的图片或需要重复背景的情况,可以使用JavaScript来动态添加AlphaImageLoader滤镜。示例代码如下: ...

    解决PNG图片在IE6中背景不透明方法

    在这个例子中,`#transparentPNG`元素的背景图片将会在IE6中获得透明效果。 需要注意的是,虽然`clear_png.js`提供了一个有效的解决方案,但它可能无法处理所有复杂的透明效果,例如半透明的PNG图片在叠加时的混合...

    背景透明的Static、Radio、CheckBox、GroupBox控件,支持PNG图片作为背景

    在.NET中,System.Drawing命名空间下的Image.FromFile方法可加载PNG图片,然后使用PictureBox控件显示,设置其BackgroundImage和BackgroundImageLayout属性。 总之,实现背景透明且支持PNG图片的Static、Radio、...

    使png图片在网页中显示为透明

    然而,有时我们可能会遇到PNG图片在网页上显示为非透明或者显示为GIF图片的问题。本教程将详细介绍如何确保PNG图片在网页中正确显示其透明效果,并提供相关代码示例。 首先,我们需要理解PNG图像格式的透明特性。...

    PNG图标图片大全

    PNG图像支持透明度,这使得它在制作图标时特别受欢迎,因为设计师可以创建具有清晰边缘和透明背景的图标,使得图标能够无缝地融入各种背景。 在“PNG图标图片大全”这个压缩包中,包含超过2000张PNG格式的图标,...

    ie8 background背景图片没有显示

    标题和描述中提到的问题是关于在IE8下背景图片无法正常显示的问题,这个问题通常与CSS的编写方式有关。 在CSS中,`background`属性用于设置元素的背景,它可以包括背景颜色、图片、重复方式等。在描述的案例中,...

    国外高人写的HTC方式PNG图片背景透明可加链接的方法

    总结来说,HTC方式实现PNG图片背景透明并添加链接是一种较旧的技术,主要用于解决IE浏览器的兼容问题。随着Web技术的发展,现在有更先进的解决方案,如纯CSS和JavaScript。然而,了解这种历史方法可以帮助我们理解...

    对C#的树型控件TREEVIEW添加背景图片

    2. **添加背景图片属性**:在新类中,添加一个属性来存储背景图片,并确保它可以被外部设置。 ```csharp private Image _backgroundImage; public Image BackgroundImage { get { return _backgroundImage; } set...

    Qt之主窗口背景图片动态拉伸

    在这个例子中,每当窗口大小发生变化时,都会触发`resizeEvent`函数,该函数会自动调用`setBackGround`函数,从而确保背景图片始终与窗口大小相匹配。 #### 解决可能出现的问题 有时候,即使正确地设置了背景图片...

Global site tag (gtag.js) - Google Analytics