CSS背景属性

1、background-attachment 属性

  scroll:默认值。背景图像会随着页面其余部分的滚动而移动。

  fixed:当页面的其余部分滚动时,背景图像不会移动。

  inherit:规定应该从父元素继承 background-attachment 属性的设置。

body
{
background-image: url(bgimage.gif);
background-attachment: fixed;
}

2、background-clip 属性

  border-box:背景被裁剪到边框盒。

  padding-box:背景被裁剪到内边距框。

  content-box:背景被裁剪到内容框。

div
{
background-color:yellow;
background-clip:content-box;
}

3、background-origin 属性

  border-box:背景图像相对于边框盒来定位。

  padding-box:背景图像相对于内边距框来定位。

  content-box:背景图像相对于内容框来定位。

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

4、background-size 属性

  length
  设置背景图像的高度和宽度。
  第一个值设置宽度,第二个值设置高度。
  如果只设置一个值,则第二个值会被设置为 "auto"。
  percentage
  以父元素的百分比来设置背景图像的宽度和高度。
  第一个值设置宽度,第二个值设置高度。
  如果只设置一个值,则第二个值会被设置为 "auto"。
  cover
  把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
  背景图像的某些部分也许无法显示在背景定位区域中。
  contain

  把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

例子1:

width: 500px;
height: 500px;
border: 15px double #0000ff;
padding: 20px;
background: #f0f url("img/panda.jpg") no-repeat;
background-clip: border-box;
background-origin: border-box;
background-size: 100%;

如图:

例子2:

width: 500px;
height: 500px;
border: 15px double #0000ff;
padding: 20px;
background: #f0f url("img/panda.jpg") no-repeat;
background-clip: padding-box;
background-origin: content-box;
background-size: 100%;

如图:

如果 background-attachment 设置了 fixed 属性,则设置 background-origin 无效果。

CSS背景属性的更多相关文章

  1. 你不知道的CSS背景—css背景属性全解

    CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...

  2. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  3. CSS 背景属性

    background: 简写属性,作用是将背景属性置在一个声明中 background-attachment: 背景图像是否固定或者随着页面的其余部队滚动 background-color: 设置元素 ...

  4. CSS背景属性background

    background属性是所有背景属性的缩写: 以下是这些背景属性: background-color:背景颜色 你可以通过颜色名称(red/green/blue)来设置 也可以用十六进制(#fff/ ...

  5. [Web 前端] 011 css 背景属性

    1. 概览 参数 释义 background-color 背景颜色 background-image 背景图片 background-repeat 是否重复 background-position 定 ...

  6. css背景属性整理

    背景颜色 {background-color:red}/*常用十六进制颜色#fff*/ 图片 {background-image:url();} /*插入图片路径*/ 重复 {background-r ...

  7. css学习_css背景属性及其应用

    css背景属性及其应用 1.背景 2.背景简写 3.背景透明(css3) 4.背景缩放(css3) 5.多背景图片(css3) 6.凹凸文字效果

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

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

  9. CSS的 背景属性

    ㈠背景色  background-color ⑴background-color 属性设置元素的背景颜色. ⑵元素背景的范围: background-color 属性为元素设置一种纯色.这种颜色会填充 ...

随机推荐

  1. 【CSS】Beginner4:Text

    1.alter the size and shape of the text 2.font-family:Arial, Verdana,"Times New Roman",helv ...

  2. Java笔记(二十五)……其他常用API

    System类 工具类全部都是静态方法 常用方法 获取系统属性信息 static PropertiesgetProperties() static StringgetProperty(String k ...

  3. Tyvj P1729 文艺平衡树 Splay

    题目: http://tyvj.cn/p/1729 P1729 文艺平衡树 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 此为平衡树系列第二道:文艺平衡树 ...

  4. Android 画直线并实现拖动

    自定义View,在onDraw()方法中绘制一条直线,在onTouch()方法中监听手指的移动. public class AroundDragView extends View implements ...

  5. input输入框默认文字,点击消失

    <input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value='' ...

  6. 解决libcrypto.so.0.9.8: cannot open shared object file

    文章解决的问题:安装nginx中需要libmysql.so.16包的支持,下面介绍如何安装,并建立lib的连接. 问题展示:error while loading shared libraries: ...

  7. IOS7 自定义UIBarButtonItem 的一些问题

    ios 下自定义导航栏的BarButtonItem 会产生一些偏移问题, 解决方案: 通过新建一个系统的带固定距离的Item来调节你的Item #define   IOS7_NAVI_SPACE   ...

  8. editplus如何设置不自动备份

    依次选择:工具,参数设置,文件(默认展开的,要缩回),然后看右边“保存文件时创建备份”,前面的框不要打勾,应用,确定

  9. DDD的好文章

    http://www.jdon.com/44815   //cqrs 架构 http://www.jdon.com/tags/272 解道领域驱动专题

  10. 【Android】BroadCast广播机制应用与实例

    如何编写广播接收器 第一步:需要继承BroadcastReceiver类,覆写其中的onReceive()方法. class MyBroadcastReceiver extends Broadcast ...