背景颜色 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. RHEL 6.3 详细安装教程

    以前刚接触linux时,什么都不懂,为了学习,在电脑上安装双系统(原系统为Win7),吃过不少苦头,在网上搜教程,很多都是语焉不详,导致安装过程中战战兢兢.最近朋友面试运维,面试官有考他对linux安 ...

  2. Lua 学习笔记（五）函数

    函数的定义:在Lua中,函数是一种对语句和表达式进行抽象的主要机制. 一.函数基本用法        在Lua中,      1.函数既可以完成某项特定的任务.(被视为一条语句)      2.也可以 ...

  3. C#: 向Word插入排版精良的Text Box

    Text Box(文本框)是Word排版的工具之一.在Word文档正文的任何地方插入文本框,可添加补充信息,放在合适的位置,也不会影响正文的连续性.我们可以设置文本框的大小,线型,内部边距,背景填充等 ...

  4. ios 静态库冲突的解决办法

    最近在做一个 iOS 的 cocos2d-x 项目接入新浪微博 SDK 的时候被“坑”了,最后终于顺利的解决了.发现网上也有不少人遇到一样的问题,但是能找到的数量有限的解决办法写得都不详细,很难让人理 ...

  5. 第一章 Linux內核簡介

    1. Linux是類Unix系統,但他不是Unix. 儘管Linux借鑑了Unix的許多設計並且實現了Unix的API(由Posix標準和其他Single Unix Specification定義的) ...

  6. canvas 图片拖拽旋转之一——坐标转换translate

    引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...

  7. Entity FrameWork 365日系列文章源码研究 （1）

    By KMSFan --  此系列的文章只作为自己的读书笔记,不纳入博客园首页. 总结的知识点: 1.DBContext 类 2.Attribute里的属性(NotNull) 3.DbContext实 ...

  8. CSS 巧用 :before和:after

    前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式.今天主要想在这篇学习笔记中写的也不多,主要是针对:bef ...

  9. maven全局配置文件settings.xml详解

    概要 settings.xml有什么用? 如果在Eclipse中使用过Maven插件,想必会有这个经验:配置settings.xml文件的路径. settings.xml文件是干什么的,为什么要配置它 ...

  10. 浅解析js中的对象

    浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...