【CSS常用背景属性】：background （缩写形式）
　　background-color：背景色
　　background-image：背景图  url中放图片地址，背景图和背景色同时存在时，背景图覆盖背景色
　　background-repeat：背景图的重复方式

　　　　属性： no-repeat不平铺，一般要选择不平铺；repeat-x水平平铺；repeat-y垂直平铺；repeat平铺（默认）
　　background-position：位置坐标、偏移量
　　　　》》指定位置：left、center、reight         top、center、bottom;
　　　　　　当只写一个属性时，另一个默认居中
　　　　》》填写坐标：水平位置 垂直位置（像素/百分比）
　　　　　　当只写一个属性值时，默认写的是水平方向，另一个垂直居中
　　　　水平方向：正数右移 负数左移

　　　　垂直方向：正数下移 负数上移

　　　　使用百分比时，代表去掉图片后，剩余空白区域距离比例
　　background-clip：裁切背景图和背景色显示区域。

　　　　　　border-box从边框外边缘开始显示；

　　　　　　padding-box从边框内边缘开始显示；

　　　　　　content-box从文字内容区开始显示；不在显示区域的背景图或背景色，会被裁切不显示

　　　　　　不改变定位位置，只是通过裁切显示部分区域

　　background-origin：设置背景图的定位方式。

　　　　　　border-box从边框外边缘开始；

　　　　　　padding-box从边框内边缘开始；

　　　　　　content-box从文字内容区开始

　　　　　　不改变背景图显示区域大小，只决定左上角定位位置

　　background-size:宽 高
　　　　【指定宽高】①直接写像素 ②百分比

　　　　》》当只有一个属性值时，默认为宽度、高度等比缩放
　　　　　　当有两个属性时，会按照指定的高度宽度进行压缩/拉伸处理

　　【其他属性值】

　　　　》》contain:图片等比缩放，缩放到宽或高的某一边等于父容器为止，另一边按比例缩放（可能导致部分空余区域无法覆盖）
　　　　》》cover:图片等比缩放，使背景图完全覆盖背景区域（可能导致背景图部分区域无法显示）

<head>

<style type="text/css">

            .div1{

                width: 300px;

                height: 300px;

                border: 20px solid greenyellow;

                background-color: red;

                background-image: url(练习用图/rBACFFIdyU2hFpbmAAAe2AYDs5o148_200x200_3.jpg);

                /*背景图覆盖背景色*/

                background-repeat: no-repeat;

                /*background-size: cover;*/

                /*background-position: center;*/

                background-position: 60px 10px;

            }

            .div2{

                width: 300px;

                height: 300px;

                background-color: red;

                padding: 30px;

                border: 20px blue dotted;

                background-image: url(练习用图/caccdb85f2881a0b!200x200.jpg);

                background-repeat: no-repeat;

                background-origin: content-box;

                background-clip: padding-box;

            }

            #ul{

                width: 1000px;

            }

        </style>

    </head>

    <body>

        <div class="div1">

        </div>

        <div class="div2">

            什么能坚持坚持坚持坚持坚持坚持坚持几年男方女方你快点快点康复费能否

        </div>

    </body>

CSS样式表之background背景的更多相关文章

  1. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  3. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  4. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

  5. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  6. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  7. HTML基础（三）——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  8. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  9. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

随机推荐

  1. 关于XML(可扩展标记语言)的基础知识与写法------2017-05-18

    XML(Extensible Markup Language) HTML:超文本标记语言,主要用来展示   XML:可扩展标记语言,用来做数据传输XML特点: 1.树状结构,有且只有一个根 2.标签名 ...

  2. Java并发编程：Callable、Future和FutureTask的实现

    启动线程执行任务,如果需要在任务执行完毕之后得到任务执行结果,可以使用从Java 1.5开始提供的Callable和Future 下面就分析一下Callable.Future以及FutureTask的 ...

  3. 【2017-05-21】WebForm内置对象：Session、Cookie，登录和状态保持

    1.Request -获取请求对象 string s =Request["key"]; 2.Response  -  响应请求对象 Response.Redirect(" ...

  4. 高效工作的秘诀——Doit.im使用总结报告

    从上次购买doit.im pro账户到现在已经快一年了,从摸索到现在的熟悉,目前这款软件已经成为我工作生活中最为重要的效率工具,在此之前也用过很多软件进行时间管理,综合起来评价,doit应该算是最棒的 ...

  5. OpenCV探索之路（十四）：绘制点、直线、几何图形

    绘制点和圆 void cvCircle( CvArr* img, CvPoint center, int radius, CvScalar color, int thickness=1, int li ...

  6. js循环给li绑定事件实现 点击li弹出其索引值 和内容

    代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...

  7. 使用ConcurrentDictionary替代Hashtable对多线程的对象缓存处理

    在之前一段时间里面,我的基类多数使用lock和Hashtable组合实现多线程内缓存的冲突处理,不过有时候使用这两个搭配并不尽如人意,偶尔还是出现了集合已经加入的异常,对代码做多方的处理后依然如故,最 ...

  8. 关于 IDEA 自动识别问题，jsp页面Controller路径自动识别的问题

    idea之所以强大,就是强大的代码提示和联想功能,写起代码来简直不要太爽.但是这几天我发现在我的jsp页面中访问controller路径的时候不会自动提示了,对于这么严谨的我肯定要找出原因啊,哈哈. ...

  9. Java之枚举

    1.定义 enum 是一种数据类型,与 全局常量比较相似,都是全局的并且是可以通过类名调用的 与全局常量区别 枚举功能更强大,可以有属性和方法 枚举比全局常量更加的规范 2.枚举特性 1)可以有属性以 ...

  10. java中的各种流（老师的有道云笔记）

    内存操作流-字节 之前的文件操作流是以文件的输入输出为主的,当输出的位置变成了内存,那么就称为内存操作流.此时得使用内存流完成内存的输入和输出操作. 如果程序运行过程中要产生一些临时文件,可采用虚拟文 ...