【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. Memcache服务搭建

    Memcache Memcache的作用网上资料都讲的很好,说简单点就是减轻读取数据库的压力,原理也很简单: 被请求的数据会先到memcache里去取,如果没有就去数据库里取,顺便给memcache带 ...

  2. [转]GET，POST，PUT，DELETE的区别

    原文链接:http://blog.csdn.net/mfe10714022/article/details/39692305 Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,P ...

  3. 17、Map接口及其常用子类(Hashtable、HashMap、WeakHashMap)

    17.Map接口 Map没有继承Collection接口,Map提供key到value的映射.一个Map中不能包含相同的key,每个key只能映射一个value.Map接口提供3种集合的视图,Map的 ...

  4. Ultimus BPM 通信和运营商行业应用解决方案

    Ultimus BPM 通信和运营商行业应用解决方案 行业应用需求 电信运营商的主要职能是维护庞大的通信网络和向电信用户提供固话通讯.手机通讯.数据通讯及相关的附加增值服务,其组织特点是工种多.分工细 ...

  5. Selenium 高阶应用之WebDriverWait 和 expected_conditions

    Seleniium 是相当不错的一个第三方测试框架,可惜目前国内已经无法访问其官网(FQ可以). 不知道大家是否有认真查看过selenium 的api,我是有认真学习过的.selenium 的api中 ...

  6. OpenCv关于灰度积分图的SSE代码学习和改进。

    最近一直沉迷于SSE方面的优化,实在找不到想学习的参考资料了,就拿个笔记本放在腿上翻翻OpenCv的源代码,无意中看到了OpenCv中关于积分图的代码,仔细研习了一番,觉得OpenCv对SSE的灵活运 ...

  7. 微信小程序 支付功能（前端）的实现

    只提供微信小程序端代码: var app = getApp(); Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转 ...

  8. [HDU1004] Let the balloon rise - 让气球升起来

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  9. Html5模拟通讯录人员排序（sen.js）

    // JavaScript Document var PY_Json_Str = ""; var PY_Str_1 = ""; var PY_Str_2 = & ...

  10. [1] Spring.Net

    开发框架之Spring.Net