CSS中  background 是一个很基本的而且比较常用的样式

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

这个是 background 的几个参数,这些参数并不是都要写上的。

1.background-color: 背景颜色,这里可以写英文,可以写RGB,可以写#xxxxxx 
                   transparent :  背景色透明

2.background-image:背景图片,只能写 none 或者 url (url)

3.background-repeat:背景图象的平铺 
                   repeat :  背景图像在纵向和横向上平铺 
                   no-repeat :  背景图像不平铺 
                   repeat-x :  背景图像在横向上平铺 
                   repeat-y :  背景图像在纵向平铺

4.background-attachment:背景图象的流动性 
                       scroll :  背景图像是随对象内容滚动 
                       fixed :  背景图像固定

5.background-size : 背景图片尺寸属性

length :  可以是尺寸

percentage  : 百分比

auto  : 自动(默认值)

cover  : 按比例调整背景图片,这个属性值跟contain正好相反,背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话,那么背景图片就会被咔嚓。覆盖,背景要覆盖元素的所有区域,不能有空白出现。

contain  : 按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景某些区域可能会有空白。包含,整个背景图都要被包含在元素内,没有超出的部分。

6.background-origin :该属性指定了背景从哪个区域(边框、补白或内容)开始绘制

padding :  背景从内边距开始绘制

border  :  背景从边框开始绘制

content  :  背景从内容开始绘制

7.background-clip :该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关

padding :  背景在内边距区域显示

border  :  背景在边框区域显示

content  :  背景在内容区域显示

8.background-position :背景图象的位置 
                      length :  百分数 | 由浮点数字和单位标识符组成的长度值。 
                      position :  top | center | bottom | left | center | right

background-position 这个参数很有意思,一般可能很少人用到,不过这个参数理解好了,确实有很大的用处,首先background-position有2个参数:background-position:(X Y),这个一般有2种情况,一个是div比背景图片大,则用这个属性背景图片会在div里浮动,如div比背景图片小,那么就变成了背景图片的变幻,具体的用代码说明吧。

这个是做的一个圆角的div, 
<div style="width:700px"> 
    <div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat;"> 
        <div style="background:transparent url(img/corners.gif) no-repeat right -8px; padding-right:8px;"> 
            <div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 0;" ></div> 
        </div> 
    </div> 
    <div style="padding-left:4px; background:transparent url(img/l.gif) repeat-y;"> 
        <div style="padding-right:4px;background:transparent url(img/r.gif) repeat-y right;"> 
            <div style="background:#eee url(img/tb.gif) repeat-x 0 -16px;">fdsafasdfasd<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf<br />fdsafasdfasdfasdf</div> 
        </div> 
    </div> 
    <div style="padding-left:8px; background:transparent url(img/corners.gif) no-repeat 0 -16px;"> 
        <div style="background:transparent url(img/corners.gif) no-repeat right -24px; padding-right:8px;"> 
            <div style="height:8px;background:transparent url(img/tb.gif) repeat-x 0 -8px;" ></div> 
        </div> 
    </div> 
</div>

CSS中background的用法的更多相关文章

  1. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

  2. CSS学习笔记(9)--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  3. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  4. 详解CSS中:nth-child的用法

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...

  5. CSS中的背景用法详解

    background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...

  6. CSS中@support的用法

    这段时间一直在调试浏览器的兼容性问题,了解到了@support的这个属性,记录下: CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写 ...

  7. CSS中@support的用法 及其calc、media用法

    背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来, ...

  8. css 中 important 的用法

      css 中 important 的如何使用?  important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox), ...

  9. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

随机推荐

  1. java swing 中JTable实现指定单元格为下拉框

    利用自定义的CellEditor实现第四列第二行为下拉框,本列其余行为文本框 利用默认的DefaultCellEditor设置第五列整列为下拉框   package mypackage; import ...

  2. 导入C文件Xcode出现Could not build module 'Foundation'错误

    #ifdef __OBJC__ #import <Foundation/Foundation.h> #import "UIImageView+WebCache.h" # ...

  3. 使用vscode搭建本地的websocket

    首先在服务器方面,网上都有不同的对websocket支持的服务器: php - http://code.google.com/p/phpwebsocket/ jetty - http://jetty. ...

  4. Nginx基础优化

    Nginx基础优化 1.隐藏nginx header版本号 1.1查看版本号 [root@Nginx ~]# curl -I http://www.yunwei.cn HTTP/1.1 200 OK ...

  5. Codeforces Round #552:G. Minimum Possible LCM

    官方题解是时间复杂度为O(nd)的.这里给出一个简单实现但是时间复杂度为O(NlogN) (N=1e7) 因为 a*b/gcd(a,b)=lcm(a,b) 所以我们可以枚举每一个因子,然后找到存在这个 ...

  6. 【javascript dom读书笔记】 第九章 CSS-DOM

    用dom设置样式 element.style.property = value 何时用dom脚本设置样式 作者写到:绝大多数的现代浏览器,虽然对css伪类的支持不是很完整,但是对dom都有良好的支持, ...

  7. C++如何阻止一个类被实例化

    (1)定义一个无用的抽象函数,使得类成为抽象类 (2)将构造函数定义为private. 为什么要这样做? 一些工具类,没有被实例化的必要.

  8. vue 表单输入绑定 checkbox

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. git的使用(扫盲)

    之前一直是通过图形化工具使用git,前两天练习用命令上传代码,遇到不少问题,最终还是解决了,在这里总结一下. 通过一个例子来演示一下.首先去github上面创建一个仓库. 创建好之后,就可以上传文件了 ...

  10. Buffering Data

    We keep telling you that you always need to close your files after you're done writing to them. Here ...