首先先来看看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. 使用自定义验证组件库扩展 Windows 窗体

    使用自定义验证组件库扩展 Windows 窗体             1(共 1)对本文的评价是有帮助 - 评价此主题                          发布日期 : 8/24/20 ...

  2. nyoj 715 Adjacent Bit Counts

    描述 For a string of n bits x1, x2, x3, …, xn,  the adjacent bit count of the string  is given by      ...

  3. In search of the perfect URL validation regex

    To clarify, I’m looking for a decent regular expression to validate URLs that were entered as user i ...

  4. iOS查看一个软件ipa包的全部内容

    iOS查看一个软件ipa包的全部内容 一,打开itunes----->我的iPhone应用程序. 二,右键点击app---->在Finder中显示---->出现下图所示界面. 三,将 ...

  5. java 多线程1：进程与线程概述

    进程和线程 谈到多线程,就得先讲进程和线程的概念. 进程 进程可以理解为受操作系统管理的基本运行单元.360浏览器是一个进程.WPS也是一个进程,正在操作系统中运行的".exe"都 ...

  6. mysql sleep进程 过多

    如果你没有修改过MySQL的配置,缺省情况下,wait_timeout的初始值是28800. wait_timeout过大有弊端,其体现就是MySQL里大量的SLEEP进程无法及时释放,拖累系统性能, ...

  7. windows 批处理-重命名

    从数字1递增批量重命名ren.bat: @echo off SETLOCAL ENABLEDELAYEDEXPANSION set /A num= FOR /F "tokens=*" ...

  8. 一款html5和css3实现的小机器人走路动画

    之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...

  9. JDBC的介绍2

    一.基础知识 1. 数据持久化 持久化(persistence):对象在内存中创建后,不能永久存在.把对象永久的保存起来就是持久化的过程.而持久化的实现过程大多通过各种关系数据库来完成. 持久化的主要 ...

  10. 云端中间层负载均衡工具 Eureka

    亚马逊提供了一个负载均衡工具 Elastic Load Balancer,但针对的是终端用户 Web 流量服务器,而 Eureka 针对的是中间层服务器的负载均衡.AWS 固有的环境,对 IP 地址. ...