背景颜色 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. 【Java心得总结六】Java容器中——Collection

    在[Java心得总结五]Java容器上——容器初探这篇博文中,我对Java容器类库从一个整体的偏向于宏观的角度初步认识了Java容器类库.而在这篇博文中,我想着重对容器类库中的Collection容器 ...

  2. Asp.Net 使用Npoi导出Excel

    引言 使用Npoi导出Excel 服务器可以不装任何office组件,昨天在做一个导出时用到Npoi导出Excel,而且所导Excel也符合规范,打开时不会有任何文件损坏之类的提示.但是在做导入时还是 ...

  3. MongoDB性能优化

    一.索引 MongoDB 提供了多样性的索引支持,索引信息被保存在system.indexes 中,且默认总是为_id创建索引,它的索引使用基本和MySQL 等关系型数据库一样.其实可以这样说说,索引 ...

  4. 关系数据库SQL之基本数据查询:子查询、分组查询、模糊查询

    前言 上一篇关系数据库常用SQL语句语法大全主要是关系型数据库大体结构,本文细说一下关系型数据库查询的SQL语法. 语法回顾 SELECT [ALL|DISTINCT] <目标列表达式>[ ...

  5. Android的系统服务一览

    System_Server进程 运行在system server进程中的服务比较多,这是整个Android框架的基础 Native服务 SurfaceFlinger 这是framebuffer合成的服 ...

  6. 一个简单的WPF字体选择器实现

    很久没有写博客了. 这是放暑假中的第一篇博客,以后会多多更新!!! 这就是我写的一个字体选择器,界面如下: 本程序用到的技术比较简单,仅仅是用了Font类的几个方法和数据绑定而已. 首先建一个四行两列 ...

  7. win10下装Ubuntu双系统

    本机状况: ssd在笔记本原来的硬盘位,已经安装win10 机械硬盘在光驱位 现在安装Ubuntukylin16到光驱位的机械硬盘建立双系统,并用Windows管理启动 1,将下载的Ubuntu镜像用 ...

  8. os模块汇总

    os.name 输出字符串指示正在使用的平台.如果是window 则用'nt'表示,对于Linux/Unix用户,它是'posix'. os.getcwd() 函数得到当前Python脚本工作的目录路 ...

  9. JDK源码分析：hashCode()方法

    提问: 1.hashCode()源码是怎么实现的. 2.hashCode()是为了配合基于散列的集合而设计的 3.hash数据结构,如何做到存取的时间复杂度为O(1)的.{函数算>逐个比较} 答 ...

  10. 数据见50条常用sql

    问题及描述: --1.学生表 Student(Sid,Sname,Sage,Ssex) --Sid 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表 Course ...