background-image 属性

  • 实例,设置body元素的背景图像:
body
{
background-image: url('paper.gif');
background-color: #cccccc;
}
  • background-image

    • url('URL') 指向图像的路径。
    • none 默认值。不显示背景图像。
    • inherit 规定应该从父元素继承 background-image 属性的设置。
  • background-attachment
    • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
    • fixed 当页面的其余部分滚动时,背景图像不会移动。
    • inherit 规定应该从父元素继承 background-attachment 属性的设置。
  • background-color
    • color_name 规定颜色值为颜色名称的背景颜色(比如 red)。
    • hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
    • rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
    • transparent 默认。背景颜色为透明。
    • inherit 规定应该从父元素继承 background-color 属性的设置。
  • background-repeat
    • repeat 默认。背景图像将在垂直方向和水平方向重复。
    • repeat-x 背景图像将在水平方向重复。
    • repeat-y 背景图像将在垂直方向重复。
    • no-repeat 背景图像将仅显示一次。
    • inherit 规定应该从父元素继承 background-repeat 属性的设置。
  • background-size: length|percentage|cover|contain;
    • length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
    • percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
    • cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
    • contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

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

  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. (hdu)4858 项目管理 (vector)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4858 Problem Description 我们建造了一个大项目!这个项目有n个节点,用很多边连接起 ...

  2. 网络爬虫 - 真·AC自动机

    前几天无聊,忽然想写点有趣的代码,关于网络方面的,刚开始就想写一个能从oj上自动拉个比赛的软件,后来查资料时看到了神奇的AC自动机,于是自己也去实现了遍. 一天狂A 500多道...就当自娱自乐了.在 ...

  3. 通过CONN_MAX_AGE优化Django的数据库连接

    上周对我们用Django+Django-rest-framework提供的一套接口进行了压力测试.压测的过程中,收到DBA通知——数据库连接数过多,希望我们优化下程序.具体症状就是,如果设置mysql ...

  4. Excel Foundation Install

    安装Excel API 函数库 1. 通过下载工具下载函数库 下载 ExcelAPI函数库更新工具   下载 ExcelAPI函数库离线包   ExcelAPI(WPS)函数库离线包      Exc ...

  5. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

  6. POJ3565 Ants (不相交线)

    那请告诉我 A - D  B - C  和  A - C  B - D 那个的和小 显然是A - C  B - D  (可以根据四边形 对角线大于对边之和) 然后 求的答案是不是就一定是不相交的 就是 ...

  7. Django 模板系统

    Django模板系统 常用语法 {{}} 变量相关 {%%} 逻辑相关 变量 格式 {{ 变量名 }} 命名规则 包括任何字母数字以及下划线 ("_")的组合 变量名称中不能有空格 ...

  8. Django ORM操作补充

    操作补充 only 只取某些去除其他 defer 去除某些取其他 # 需求: 只取某n列 queryset=[ {},{}] models.User.objects.all().values( 'id ...

  9. elasticsearch更改mapping(不停服务重建索引)

    转载地址:http://donlianli.iteye.com/blog/1924721?utm_source=tuicool&utm_medium=referral Elasticsearc ...

  10. mysql快速生成批量测试数据

    mysql快速生成批量测试数据 参考资料: https://blog.csdn.net/oahz4699092zhao/article/details/53332148 -- 创建一个临时内存表 ; ...