首先先来看看background有那些值:

可以按顺序设置如下属性（可点击进入相应的css手册查看使用）：
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-attachment 背景图片是固定还是滚动
background-position 背景图片的定位

接下来我们重点来讲解css background通常的使用方法
首先我们来看下面一段代码
background:url(bgimg.gif) no-repeat 5px 5px;
如下图解释:

background:

background为符合属性.属性如下:

background:background-color ||background-image || background-repeat || background-attachment || background-position

border-style: none; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: 'black Verdana', Arial, Helvetica, sans-serif;">

默认值:tansparent

取值 描述(背景颜色) 例子 效果
transparent 背景颜色透明 
    <div style="background-color:Aqua">

        <span style="border:solid 1px black">span</span><br />

        div

    </div>
color 指定颜色
1.系统定义的颜色
2.rgb(100,100,100)
3.#FFEE11		 
    <div style="background-color:Silver">和谐社会</div>

    <div style="background-color:rgb(100,200,90)">和谐社会</div>

    <div style="和谐社会</div>

 

background-image:

默认值:none

取值 描述(背景图片) 例子 效果
none 没有背景图片 
    <div style="background-image:none">Background</div>
url(url)

使用绝对或相对的url指定背景图片

 
    <div style="background-image:url('del.gif')"></div>

 

background-repeat:

默认值:repeat

取值 描述(背景平铺) 例子 效果
repeat 在横向和纵向上平铺 
 
<div style="background-image:url('del.gif'); background-repeat:repeat">

</div>
no-repeat 不平铺 
<div style="background-image:url('del.gif'); background-repeat:no-repeat">

</div>
repeat-x 在横向上平铺 
<div style="background-image:url('del.gif'); background-repeat:repeat-x">

</div>
repeat-y 在纵向上平铺 
<div style="background-image:url('del.gif'); background-repeat:repeat-y">

</div>

 

background-attachment:

默认值:scroll

取值 描述(背景滚动) 例子 效果
scroll 跟随内容滚动 
<body  style="background-image:url('del.gif'); background-repeat:no-repeat;

    background-attachment:scroll">

</body>
 随着滚动条的移动,可能就看不到了.
fixed 不论怎样滚动,始终固定在页面上 
<body  style="background-image:url('del.gif'); background-repeat:no-repeat;

    background-attachment:fixed ">

</body>
 始终显示

 

background-position:

默认值:0% 0%

如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。

表达 例子 效果
background-position: length || length
百分数 | 由浮点数字和单位标识符组成的长度值		 
<div style="background-image:url('del.gif'); background-position:10px 10px;

     background-repeat:no-repeat">

</div><br />

<div style="background-image:url('del.gif'); background-position:50% 50%;

     background-repeat:no-repeat">

</div>
background-position:position||position

第一个position: top center bottom
第二个position: left center right

 
 
<div style="background-image:url('del.gif'); background-position:left center;

    background-repeat:no-repeat">

</div><br />

<div style="background-image:url('del.gif'); background-position:center center;

    background-repeat:no-repeat">

</div>

 

属性名 取值 默认值
background-position-x length/left/center/right 0%
background-position-y length/top/center/bottom 0%

一个网站上的图片或图标都在一张图片上的css制作方法：

1.CSS样式

 .d1{width:13px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) 0 0 no-repeat;}

 .d2{width:13px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) -14px 0 no-repeat;}

 .e1{width:23px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) -36px 0 no-repeat;}/*background:url(ex_icon.png) -36px(往右) 0(往下) */

 .e2{width:23px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) -61px 0 no-repeat;}

2.html代码

 <div class="d1"></div>

 <div class="d2"></div>

 <div class="e1"></div>

 <div class="e2"></div>

3.图片

CSS background 之设置图片为背景技巧的更多相关文章

  1. css background之设置图片为背景技巧

    css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...

  2. css background之设置图片为背景技巧

    原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那 ...

  3. 在css中设置图片的背景图，怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  4. css一个div设置多个背景图片

    html:定义一个div <div class="item__content"></div> css:样式 .item__content { positio ...

  5. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  6. background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别

    1. background (background-color, background-image)  背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width ...

  7. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  8. css background 背景知识详解

    background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...

  9. background 设置文本框背景图

    background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...

随机推荐

  1. Oracle Study之-AIX6.1构建Oracle 10gR2 RAC(3)

    Oracle Study之-AIX6.1构建Oracle 10gR2 RAC(3) 一.配置共享存储 [oracle@aix203 ~]$lsdev -c disk hdisk0 Available ...

  2. NGUI学习笔记（六）：ScrollView、Grid和Table

    下面我们来看看游戏UI开发中比较核心的开发,我称为列表开发,比如背包和各种形式不一的列表等,下面我们来看几个具体的样例:   基本上就是一些重复的制作好的多个UI控件进行排列,同时可以支持滚动,当然, ...

  3. error LNK2019: 无法解析的外部符号（编程解决方法）

    正在编译...1>Ipv4IPv6traceroutesrc.cpp1>d:\研究生\c++\study\test\test\ipv4ipv6traceroutesrc.cpp(461) ...

  4. sql排它锁

    1.为什么需要排它锁 事务中,有时我们在操作一条数据时,是不能让其他事务同时去操作的. 如某商品库存数量为1,如果有多个事务对该库存进行减一操作,那么库存可能出现负数. 所以,在某个事务操作时,需要把 ...

  5. Solr学习之四-Solr配置说明之二

    上一篇的配置说明主要是说明solrconfig.xml配置中的查询部分配置,在solr的功能中另外一个重要的功能是建索引,这是提供快速查询的核心. 按照Solr学习之一所述关于搜索引擎的原理中说明了建 ...

  6. gulp的使用以及Gulp新手入门教程

    Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...

  7. 设置将Maven的jar包发布到lib

    2,设置将Maven的jar包发布到lib下. Add -> Java Build Path Entries -> Maven Dependencies -> Finish 设置完成 ...

  8. jquery和css3实现的很酷的菜单导航

    今天为大家带来的是jquery和css3实现的不错的导航菜单.点击列表图表后,内容页面向内移动显示菜单项.当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位.看下图 在线预览   源码下载 我们看下实现 ...

  9. 【C#】POST请求参数含中文，服务器解析得到乱码

    问题:POST请求参数含有中文,已将含中文的string以UTF-8编码格式转为byte[],并写入到请求流中,但服务器收到数据后以UTF-8解码,得到的依然是乱码! 百度到了以下方法,但依然无法解决 ...

  10. 推荐一款编辑SQL的工具：jsqlparser

    这个工具真的挺好用的,采用的是观察者模式,Visitor. 虽然我学过这个模式,但是乍一用还是有点懵逼的. 给好一个SQL语句之后,jsqlparser可以把这个sql语句给分解成all kind o ...