【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. SpringMVC——DispatcherServlet的IoC容器(Web应用的IoC容器的子容器)创建过程

    在上一篇<Spring--Web应用中的IoC容器创建(WebApplicationContext根应用上下文的创建过程)>中说到了Web应用中的IoC容器创建过程.这一篇主要讲Sprin ...

  2. CentOS7 防火墙规则 (firewalld)

    1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld  停止: systemctl disab ...

  3. java中几种获取项目路径方式

    转自http://caodaoxi.iteye.com/blog/1234805     在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录 ...

  4. 利用HTTP-only Cookie缓解XSS之痛

    在Web安全领域,跨站脚本攻击时最为常见的一种攻击形式,也是长久以来的一个老大难问题,而本文将向读者介绍的是一种用以缓解这种压力的技术,即HTTP-only cookie. 我们首先对HTTP-onl ...

  5. 开涛spring3(6.2) - AOP 之 6.2 AOP的HelloWorld

    6.2.1  准备环境 首先准备开发需要的jar包   org.springframework.aop-3.0.5.RELEASE.jar com.springsource.org.aspectj.w ...

  6. openfire muc 移除成员

    muc添加成员到数据库可参考 将Openfire中的MUC改造成类似QQ群一样的永久群 插件 插件是一位大神参考第一篇文章改进后编写的插件,进测试可以直接使用. ------------------- ...

  7. centos6.5 ssh免密码登陆

    ssh-keygen -t rsa ssh-copy-id -i ~/.ssh/id_rsa.pub hadoop1

  8. android学习-第一讲

    一.基础View控件 View类的常见XML属性,对应发放及说明 每个界面控件都需要设置Android:layout_height,Android:layout_width,指定控件的高度和宽度.通常 ...

  9. JAVA POI 应用系列（1）--生成Excel

    POI简介(官网:http://poi.apache.org/)     Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office ...

  10. 论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解

    一.什么是JQuery? JQuery是一种JavaScript框架,是一堆大神搞出来的能够让前端程序猿敲更少代码.实现更多功能的工具(在此,跪谢各位JQuery开发大大们!!!).JQuery的使用 ...