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实验报告(三)&第五周课程总结

    班级 计科二班 学号 20188425 姓名 IM 完成时间2019/9/27 评分等级 实验三 String类的应用 实验目的 掌握类String类的使用: 学会使用JDK帮助文档: 实验内容 1. ...

  2. 硬RAID与软RAID的区别

    什么是RAID? RAID是英文Redundant Array of Independent Disks的缩写,翻译成中文即为独立磁盘冗余阵列,或简称磁盘阵列.简单的说,RAID是一种把多块独立的硬盘 ...

  3. Python之元组、列表and 字典

    序列: 元组和字符串都是不可变的哦 你看,数据空间不一样了 元组的话,你可以联想到C里面的结构体变量啊,为了包容不同的数据类型: 也可以这样取值哦: 列表:列表是可修改的哦~ 不然数据大了再另外开辟空 ...

  4. android中SharedPreferences

    SharedPreferences:用于存储少量并且数据格式简单,基本上都是普通的字符串,标量类型的值,比如:应用程序的各种配置信息等. SharedPreferences:保存的数据格式主要是key ...

  5. scrollHeight与offsetHeight

    offsetXxx 是 HTMLElement 的属性, HTMLElement 接口表示所有的 HTML 元素,scrollXxx 是 Element 的属性,Element 是一个通用性非常强的基 ...

  6. Splay(区间翻转)&树套树(Splay+线段树,90分)

    study from: https://tiger0132.blog.luogu.org/slay-notes P3369 [模板]普通平衡树 #include <cstdio> #inc ...

  7. Dubbo---注册中心

    1.Multicast 注册中心 1.1 Multicast 注册中心   不需要启动  任何中心节点,只要广播地址一样,就可以互相发现. 1.2 1.3 配置   2.zookeeper 注册中心( ...

  8. vue 页面回退mounted函数不执行的问题及解决方法

    前言 最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新 经过一番面向百度研究,终于找到了问题所在.接下来就记录一下这 ...

  9. 【leetcode】133. Clone Graph

    题目如下: Given the head of a graph, return a deep copy (clone) of the graph. Each node in the graph con ...

  10. html根标签设置font-size为100px,使用rem,body没设置字体大小

    今天使用了rem来写样式,前提是要给html设置font-size:100px;这样在计算比例时相对方便点:结果在将一个span标签设置为display:inline-block;时发现span不能能 ...