背景颜色 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. MySQL学习笔记三：库和表的管理

    1.MySQL数据库服务配置好后,系统会有4个默认的数据库. information_schema:虚拟对象,其对象都保存在内存中 performance_schema:服务器性能指标库 mysql: ...

  2. Ubuntu杂记——链接ln的使用:创建和删除符号链接

    原文链接:http://blog.csdn.net/janpylx/article/details/6761910 一 . 使用方式 ln [option] source_file dist_file ...

  3. 【记录】GitHub/TortoiseGit 修改邮箱/提交者

    我使用 Git 客户端工具是 TortoiseGit,在提交更新的时候,不知何时起会出现下面这种情况: 正常提交作者信息显示应该是: 本来也没怎么注意,但是在提交历史中,记录就不显示出来了,也就是在首 ...

  4. T-Sql（七）用户权限操作（grant）

    一般数据库的权限操作我们很少用,除非一些大型的项目,需要给数据库配置不同的用户及权限,防患于未然,今天我们就来了解下t-sql中配置用户权限操作. 先看示例代码: --创建登录名 create log ...

  5. 微软的坑：Url重写竟然会引起IIS内核模式缓存不工作

    万万没有想到!当初为了解决使用负载均衡时记录客户端IP地址的问题,在IIS URL Rewrite Module中增加了一条URL重写规则(详见迁入阿里云后遇到的Request.UserHostAdd ...

  6. Apworks框架实战（一）：Apworks到底是什么？

    简介 Apworks是一款基于Microsoft .NET的面向领域驱动的企业级应用程序开发框架,它适用于以领域模型为核心的企业级系统的开发和集成.Apworks不仅能够很好地支持经典的分层架构,而且 ...

  7. 单片机DA转换实现正弦波

    使用的是查表法: 1.c文件: #include "reg52.h" #include <intrins.h> #include <i2c.h> #defi ...

  8. SqlServer -- char与varchar、nchar、N

    一.char与varchar 带var的表示的是:可变长度,会根据实际存储数据的大小动态重新分配存储空间,相对来说节省存储空间. 不带var的表示的是:固定长度,存储3字符也是要占用10个字节的,会自 ...

  9. 基础笔记（三）：网络协议之Tcp、Http

    目录 一.网络协议 二.TCP(Transmission Control Protocol,传输控制协议) TCP头格式 TCP协议中的三次握手和四次挥手 TCP报文抓取工具 三.HTTP(Hyper ...

  10. Linux 定时任务crontab

    crontab定时任务格式 1 * * * * * command 2 第1列表示分钟1-59 每分钟用*或者 */1表示 3 第2列表示小时1-23(0表示0点) 4 第3列表示日期1-31 5 第 ...