重点内容是:背景的显示范围是在元素的内边距之内的,如果要想改变显示范围,可以使用background-orgin和background-clip进行调整。

(1)background-orgin有三个属性:border-box(边框左上角);padding-box(内边距左上角);content-box(内容左上角)。这个属性指定背景图片的起始位置,效果见下:

background-orgin属性的更多相关文章

  1. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  2. background复合属性详解(上):background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  3. background系列属性

    1.background-color背景颜色属性 ①颜色表示方法 英语单词:red   blue   purple    skyblue. rgb:r代表红色   g代表绿色   b代表蓝色    也 ...

  4. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  5. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  6. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  7. background相关属性

    background-origin: 规定 background-position 属性相对于容器的哪一部分来定位. padding-box 背景图像相对于内边距框来定位:(默认) border-bo ...

  8. background——背景属性

    一.背景属性 1.1.背景颜色background-color <style> /*浮动,横向排列*/ div{float: left;} /*background-color属性值支持三 ...

  9. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  10. css详解background八大属性及其含义

    background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...

随机推荐

  1. JdbcUtils 系列1

    1.开发前准备 创建java pro为dbutils_1,没有lib目录,建一个即可 /dbutils_1/lib/mysql-connector-java-5.0.8-bin.jar 数据库搭建c3 ...

  2. linux服务之maven

    curl -O http://mirrors.noc.im/apache/maven/maven-3/3.3.9/binaries/apache-maven-3.3.9-bin.zip [root@d ...

  3. [转]Vs解决方案的目录结构设置和管理

    原文地址:[转]Vs解决方案的目录结构设置和管理 作者:大明   以下内容为“原创”+“转载” 首先,解决方案和项目文件夹包含关系(c++项目): VS解决方案和各个项目文件夹以及解决方案和各个项目对 ...

  4. HTML5播放器

    seweise palyer http://www.whatled.com/m/?post=1626 https://github.com/sewise/sewise-player2 七牛云音视频支持 ...

  5. JQuery AJAX 解析获得的JSON数据

    下面的解析的Json是一个二级循环. <!DOCTYPE html> <html> <head> <script src="https://code ...

  6. iOS学习-----真机测试过程

    原文 http://www.th7.cn/Program/IOS/201407/233103.shtml   1:进入苹果开发者平台 2:进入Member Center 3:输入开发者账号和密码 4: ...

  7. 黄聪: 50 个 Bootstrap 插件

    Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...

  8. 用Visual Studio 2015 编写 MASM 汇编程序(一)环境配置

    原文地址:http://kipirvine.com/asm/gettingStartedVS2015/index.htm#CreatingProject 下面内容根据上面文章翻译整理而来! 开发32位 ...

  9. JAVA设计模式之工厂方法模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述工厂方法模式的: 工厂方法模式是类的创建模式,又叫做虚拟构造子(Virtual Constructor)模式或者多态性工厂(Polymor ...

  10. C# 正则表达式及返回匹配的所有结果

    C# 正则表达式是在  System.Text.RegularExpressions 空间定义的,其中的 IsMatch() 方法用于返回 bool 类型,表示要搜索的字符串与传入的正则表达式是否匹配 ...