描述 CSS
background-color 规定要使用的背景颜色。 1
background-position 规定背景图像的位置。 1
background-size 规定背景图片的尺寸。 3
background-repeat 规定如何重复背景图像。 1
background-origin 规定背景图片的定位区域。 3
background-clip 规定背景的绘制区域。 3
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。 1
background-image 规定要使用的背景图像。 1
inherit 规定应该从父元素继承 background 属性的设置。 1

CSS3 background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

描述 测试
border-box 背景被裁剪到边框盒。 测试
padding-box 背景被裁剪到内边距框。 测试
content-box 背景被裁剪到内容框。 测试

定义和用法

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

默认值: scroll
继承性: no
版本: CSS1
JavaScript 语法: object.style.backgroundAttachment="fixed"
 
 

可能的值

描述

scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。

CSS3背景总结的更多相关文章

  1. CSS3背景温故

    1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...

  2. css3 背景记

    css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...

  3. CSS自学笔记(11):CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  4. 第七十九,CSS3背景渐变效果

    CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...

  5. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  6. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  7. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  8. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

  9. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

  10. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

随机推荐

  1. Django 版本对应的 Python 版本

    Django 版本对应的 Python 版本: Django 版本 Python 版本 1.8 2.7, 3.2 , 3.3, 3.4, 3.5 1.9, 1.10 2.7, 3.4, 3.5 1.1 ...

  2. 数学图形(1.25)cassini曲线

    通过这种曲线可以看到一种由8到0的过度 相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生成数学图形.该软件免费开源.QQ交流群: 367752815 #http://www.mathcu ...

  3. Proxmark3命令帮助

    Proxmark3命令帮助     目录 [隐藏]  1 使用技巧 2 help 主帮助命令(基于r830以及以下版本) 3 hw 硬件检测相关命令 4 data 图形窗口/缓冲区数据操作等命令 5  ...

  4. Windows2003 Webshell默认权限

    0×00 前言 0×01 Windows2003默认配置 0×02 Windows2003典型配置的权限 0×03 cmd运行的条件   0×00 前言 这一章主要讲解关于我们刚拿到webshell的 ...

  5. Java Web学习总结-文件下载

    参考资料:https://www.cnblogs.com/xdp-gacl/p/4200090.html 在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件 ...

  6. [Firebase] 2. Firebase Event Handling

    /** * Created by Answer1215 on 11/9/2014. */ var app = angular.module('app', ['firebase']); app.cons ...

  7. [AngularJS] Angular 1.3 $submitted for Form in Angular

    AngularJS 1.3 add $submitted for form, so you can use  $submitted  to track whether the submit event ...

  8. SVG报错error on line 39 at column 26: Namespace prefix xlink for href on script is not defined

    转自:http://stackoverflow.com/questions/3561270/error-on-line-39-at-column-26-namespace-prefix-xlink-f ...

  9. C++标准库简介

    C++标准库的所有头文件都没有扩展名.C++标准库的内容总共在50个标准头文件中定义,其中18个提供了C库的功能. <cname>形式的标准头文件[ <complex>例外]其 ...

  10. LeetCode 303 Range Sum Query - Immutable(范围总和查询-永久不变)(*)

    翻译 给定一个整型数组nums,找出在索引i到j(i小于等于j)之间(包含i和j)的全部元素之和. 比如: 给定nums = [-2,0,3,-5,2,-1] sumRange(0, 2) -> ...