【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. freemarker---详细使用教程

    FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成: 1,文本:直接输出的部分2,注释:<#-- ... -->格式部分,不会输出 ...

  2. wdc网站部署问题

    最近公司新买了一个服务器,将项目迁移到新服务器上,按照wdcp安装方法,部署了lnamp环境,具体方法如下: 安装方法1 只安装wdcp面板看看wget http://down.wdlinux.cn/ ...

  3. Java 多线程详解（一）------概念的引入

    这是讲解 Java 多线程的第一章,我们在进入讲解之前,需要对以下几个概念有所了解. 1.并发和并行 并行:指两个或多个时间在同一时刻发生(同时发生): 并发:指两个或多个事件在一个时间段内发生. 在 ...

  4. 029 hibernate抓取策略

    实例A引用实例B,B如果是代理的话(比如多对一关联中):如果遍历A的查询结果集(假设有10条记录),在遍历A的时候,访问B变量,将会导致n次查询语句的发出!这个时候,如果在B一端的class上配置ba ...

  5. 开涛spring3(6.9) - AOP 之 6.9 代理机制

    Spring AOP通过代理模式实现,目前支持两种代理:JDK动态代理.CGLIB代理来创建AOP代理,Spring建议优先使用JDK动态代理. JDK动态代理:使用java.lang.reflect ...

  6. 一、 开篇（ASP.NET MVC5 系列）

    这个教程将教你一些用VS2013创建ASP.NET MVC 5 Web应用程序基础知识.为了避免开发工具的不一致而带来的一些小麻烦,建议你使用和我一样的开发工具VS2013英文版. 开发工具:Visu ...

  7. SmartCoder每日站立会议09

    站立会议内容 今天约了在一起编程,详细确定各个页面以及消息的添加.发送等一些小的细节. 1.站立会议照片:      2.任务展板 2.燃尽图

  8. matlab错误：Subscript indices must either be real positive integers or logicals.

    matlab错误:Subscript indices must either be real positive integers or logicals. 中文解释:下标索引必须是正整数类型或者逻辑类 ...

  9. [C++][OpenGL]自己写GUI(0)——介绍

    文章可转载,转载请注明出处:http://www.cnblogs.com/collectionne/p/6928612.html.文章未完,如果不在博客园(cnblogs)发现本文,请访问前面的链接查 ...

  10. 对pathtracing的一些个人理解

    本人水平有限,若有错误也请指正~ 上面说到pathtracing(pt)的一些优点和缺点,优点即其实现很简单,这就是大概为什么当今市面上流行的很多渲染器如今都相继采用pathtracing算法为核心进 ...