背景颜色 background-color

语法：

background-color：<color>

默认值：transparent  透明

适用于：所有元素

继承性：无

动画性：是

计算值：指定值

取值：

<color>： 指定颜色。

说明：

设置或检索对象的背景颜色。

  • 当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。
  • 如果设置了 <' background-image '>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
  • 对应的脚本特性为backgroundColor。

背景图片 background-image

语法：

background-image：<bg-image> [ , <bg-image> ]*

<bg-image> = <image> | none

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none： 无背景图。
<image>： 使用绝对或相对地址指或者创建渐变色来确定图像。

说明：

设置或检索对象的背景图像。

  • 如果设置了 <' background-image '>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
  • 如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。
  • 对应的脚本特性为backgroundImage。

background-image : url(“http://static.criteo.net/flash/icon/nai_small.png”);  // 全URL路径

background-image : url(“/flash/icon/nai_small.png”);  // 根路径

background-image : url(“../nai_small.png”) ;  // 相对于css文件的路径

background-image : url(../nai_small.png) ;  //不写引号

background-image : url(‘../nai_small.png’) ; // 单引号

背景重复  background-repeat

语法：

background-repeat：<repeat-style> [ , <repeat-style> ]*

<repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2}

默认值：repeat

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

repeat-x：背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
repeat： 背景图像在横向和纵向平铺
no-repeat： 背景图像不平铺
round： 背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space： 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

说明：

设置或检索对象的背景图像如何铺排填充。必须先指定 <' background-image '> 属性。

  • 允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
  • 如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值
  • 对应的脚本特性为backgroundRepeat。

背景跟着内容滚动 background-attachment

语法：

background-attachment：<attachment> [ , <attachment> ]*

<attachment> = fixed | scroll | local

默认值：scroll

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

fixed： 背景图像相对于窗体固定。
scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

说明：

设置或检索背景图像是随对象内容滚动还是固定的。必须先指定 <' background-image '> 属性。

  • 对应的脚本特性为backgroundAttachment。
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>background-attachment 背景跟着内容动</title>

    <style type="text/css">

    .parent{

        height: 2000px;

    }

    .sample{

        overflow: scroll;

        font-size: 22px;

        margin: 200px;

        width: 230px;

        height: 200px;

        border: 2px solid black;

        background-image: url(red.png);

        background-attachment: local;

    }

    </style>

</head>

<body>

<div class="parent">

<div class="sample">

Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World

</div>

</div>

</body>

</html>

CSS background-color 、image 背景图片的更多相关文章

  1. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  2. 用css来写一个背景图片的切换

    代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...

  3. 2014辛星在读CSS第八节 使用背景图片

    这应该是系统CSS本教程的最后一节,为什么,由于本节.我觉得基础已经完成,接下来的就是无休止的战斗,战斗非常难用知识讲出来,通过积累,战斗经验.这些都不是说出来. 伟大,下来说一下用CSS加入背景图片 ...

  4. CSS hack前传——背景图片全屏

    在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...

  5. 【CSS学习笔记】背景图片

    直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/ ...

  6. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

  7. vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题

    .bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg ...

  8. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  9. IE9以下通过css让html页面背景图片铺满整个屏幕

    第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. C#线程同步自动重置事件——AutoResetEvent

    AutoResetEvent对象用来进行线程同步操作,AutoResetEvent类继承waitHandle类. AutoResetEvent对象有终止和非终止两种状态,终止状态是线程继续执行,非终止 ...

  2. Notes:indexedDB使用

    indexedDB是浏览器端保存结构化数据的一种数据库,类似于mysql,oracle等数据库,但indexedDB使用对象存储数据,而不是用表. indexedDB是全局的宿主对象,使用window ...

  3. C语言 第四章 关系、逻辑运算与分支流程控制

    一.关系运算 若干表达式用关系运算符连接而成,就构成关系表达式. 关系表达式中,表达式成立,其值为1(真):表达式不成立,其值为0(假).其他表达式中,其结果如果是非0则为真,结果为0则为假. 关系运 ...

  4. 将文本文件的内容存储在DataSet中的方法总结

    项目中比较多的会对文件进行操作,例如文件的上传下载,文件的压缩和解压等IO操作.在.NET项目中较多的会使用DataSet,DataTable进行数据的缓存. 项目中对文本文件的操作比较简单,但是如果 ...

  5. gradle学习笔记

    一直想着花时间学习下gradle,今天有空.入门一下.参考:极客学院gradle使用指南,官方文档:gradle-2.12/docs/userguide/installation.html,以及百度阅 ...

  6. Spring整合Ehcache管理缓存

    前言 Ehcache 是一个成熟的缓存框架,你可以直接使用它来管理你的缓存. Spring 提供了对缓存功能的抽象:即允许绑定不同的缓存解决方案(如Ehcache),但本身不直接提供缓存功能的实现.它 ...

  7. Windows Phone 如何在程序中播放提示声音？

    在Windows Phone 中播放提示音可以使用 Microsoft.Xna.Framework.Audio 命名空间下的 SoundEffect 类.具体使用方法如下: 1. 根据声音文件路径创建 ...

  8. 从 AJAX 到 JSONP的基础学习

    目录索引: 一.AJAX的概念二.POST && GET三.原生实现AJAX简单示例 3.1 实现代码 3.2 重点说明四.框架隐藏域 4.1 基本概念 4.2 后台写入脚本 4.3 ...

  9. ASP.NET MVC4 Forms 登录验证

    Web.config配置: 在<system.web>节下: <authentication mode="Forms"> <forms loginUr ...

  10. 异步编程系列第04章 编写Async方法

    p { display: block; margin: 3px 0 0 0; } --> 写在前面 在学异步,有位园友推荐了<async in C#5.0>,没找到中文版,恰巧也想提 ...