CSS教程:背景background属性应用
互联网 发布时间:2009-04-02 19:33:31 作者:佚名 我要评论
网页制作Webjx文章简介:背景background:background-image:url("图片的网址");背景图background: url(" 图片的网址 "); 背景.background-color:#色码;背景色彩.
背景background
css说明
background-image:url("图片的网址&
背景background:background-image:url("图片的网址");背景图background: url(" 图片的网址 "); 背景.background-color:#色码;背景色彩. 背景background
css说明
background-image:url("图片的网址");背景图
background:url("图片的网址");背景
background-color:#色码;背景色彩
Exp:
background-image:url(背景图案.jpg,gif,bmp);
background-color:#FFFFFF;
background-color:transparent;<--设定背景为透明色
--------------------------------------------------------------------------------
background-repeat改变背景图片的重复并排的设定
css
说明
repeat背景图片并排
repeat-x背景图片以X方向并排
repeat-y背景图片以Y方向并排
no-repeat背景图片不以并排的方式处理
Exp:
background-image:url("https://www.jb51.net/xx.gif");
background-repeat:no-repeat;
以https://www.jb51.net/xx.gif这张图片为背景,当图片大小不够的时候,不并排重复
--------------------------------------------------------------------------------
background-attachment是否固定图片位置
css
说明
scroll拉动卷轴时,背景图片会跟着移动(缺省值)
fixed拉动卷轴时,背景图片不会跟着移动
Exp:
background-image:url("https://www.jb51.net/xx.gif");
background-repeat:no-repeat;
background-attachment:fixed;
以https://www.jb51.net/xx.gif背景图片不重复并列,且不随卷轴移动
--------------------------------------------------------------------------------
以长度定位background-position:xy
使用百分比定位background-position:x%y%
css
说明
x%往右移
y%往下移
backgroud-position:0%0%;左边上方
backgroud-position:0P%;左边中间
backgroud-position:50%0%;中间上方
backgroud-position:50P%;正中间
backgroud-position:100%0%;右边上方
backgroud-position:00%;左边下方
backgroud-position:100P%;右边中间
backgroud-position:500%;中间下方
backgroud-position:1000%;右边下方
以关键字定位
关键字说明
top上(y=0)
center中(x=50,y=50)
bottom下(y=100)
left左(x=0)
Exp:
background-position:center;
图片在指定背景中央X=50%Y=50%位置
background-position:200px30px
相关文章
- DIV背景定义参数:background 设置元素的背景参数,div+css的广泛使用,也改变了这一使用习惯,变成了将N多小图标集于一个大图上,再通过div来定位需要用到的图片部分,大大2013-02-02
对背景图定位中background-position属性的自我理解
最近在项目中需要大量的用到很多标签按钮什么的零碎图片,加上一直没机会使用Css中的”精灵技术“,这里把我对background-position的理解写成文档供更多人使用学习;如果有2013-01-15css 中的background:transparent到底是什么意思有什么作用
css 中的 transparent到底是什么意思? 一直觉得很奇怪,到底有什么用的啊?,本文将详细说明,需要的朋友可以参考下2012-12-12background-postion定位与图片结合实现圆角效果
background-postion 背景默认铺设位置的起点为:元素的左上角.2011-07-27CSS中背景background-position负值定位深入理解[图文]
CSS中背景定位background-position负值一直是不好理解的难点,一方面用的比较少,另一方面的理解的不够深入,今天花了点时间认真的思考了,把我的心得写出来2011-03-21- 背景属性是给网页添加背景色或者背景图所用的CSS样式,它的能力远远超于html之上。2011-01-05
利用CSS定位背景图片 background-position
我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用。打开这种图片看一下,会发现这张图片上包2009-12-17CSS background-position的使用说明详解
设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响2009-12-17CSS background-position 属性 定位图片
看别人代码发现一个背景图中有很多图片,大家可以参考下原理2009-11-20- 网页制作Webjx文章简介:使用CSS3 HSL声明同样是用来设置颜色的。下一个呢? HSLA? 是的,这个和RGBA的效果是一样的。 使用CSS3 HSL声明同样是用来设置颜2009-04-02
最新评论