背景语法:
background: background-color || background-image || background-repeat || background-attachment || background-position

CSS中背景单词:
background CSS手册查询-background手册
background-color 设置颜色作为对象背景颜色
background-image 设置图片作为背景图片
background-repeat 设置背景平铺重复方向
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。
background-position 设置或检索对象的背景图像位置。

Background背景样式的值是复合属性值组合,也就是背景单词的值可以跟多个属性值,值与值之间使用一个空格间隔链接上即可。
如:
background:#000 url(图片地址) no-repeat left top

Css background背景作用:
1、设置纯色背景。背景background可以设置对象纯色的背景颜色,
2、设置图为背景。可以设置对象背景为图片,如果背景是图片可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何位置。

Background分析解析图

Css background复合背景结构分析图

Body{background:#FFF url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 fixed }

CSS图片背景   -   TOP

这里说的是以图片作为背景图片 -  CSS 背景图片详细介绍:http://www.divcss5.com/jiqiao/j80.shtml
CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。

background:url(http://www.divcss5.com/img/logo.gif);设置DIVCSS5的LOGO图片作为背景

background-image:url(http://www.divcss5.com/img/logo.gif);具有相同效果。这样设置图片作为背景有个缺陷就是图片会上下左右的重复,接下来我们只需看以下图例教程即可掌握CSS background

图片背景样式(固定、滚动)

实现这个效果使用CSS单词是background-attachment 当然通常情况下背景默认是固定的如果是自己使用CSS background简写则如上图。
background-attachment使用解析:
background-attachment:fixed; 背景固定
background-attachment:scroll css背景图片是随对象内容滚动

图片background背景语法:

background-image :url (url)
background-image :url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif)设置对象背景为图片http://www.divcss5.com/img201301/divcss5-logo-2013.gif

如果图片作为背景时候要求是否重复平铺,平铺方向等我们都需要background-position和background-repeat配合使用

CSS 背景 background 讲解的更多相关文章

  1. CSS背景background、background-position使用详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  2. CSS背景background详解,background-position详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  3. CSS背景background图片

    一.CSS背景background图片   -   TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图 ...

  4. CSS 背景background实例

    css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...

  5. css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  6. CSS背景-background

    复合属性-background 如果同时设置了background-color和background-image时,背景颜色会被图片覆盖. background-image: 用作背景的图片,back ...

  7. css 背景 background

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...

  8. css常用样式背景background如何使用

    css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...

  9. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

随机推荐

  1. NullSafe 的原理

    摘要 NullSafe is a simple category on NSNull that returns nil for unrecognised messages instead of thr ...

  2. metasploit nessus & db_autopwn

    nessus官网:https://www.tenable.com/products/nessus-vulnerability-scanner 下载地址:https://www.tenable.com/ ...

  3. Let's Encrypt(开源SSL证书管理工具)

    刚装上一个StartSSL 的证书没几天,却看到官方发出这样的通知: 无聊中看到了网上各种相关的扯淡: http://tieba.baidu.com/p/4801786642 http://www.t ...

  4. 淘宝npm镜像使用方法

    镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在): 通过config命令npm config set registry https://registry. ...

  5. ContourLine

    #define MULTI_PLOT true //Determine whether or not to plot multiple iterations. #define X_MAX 1.0 // ...

  6. 解决ie 低版本的 background-size 兼容问题

    在IE不支持这个属性的时候可以通过滤镜来实现这样的一个效果. div{background-size: cover;filter:progid:DXImageTransform.Microsoft.A ...

  7. ACM网络镜像赛

    参加了东大,南理的网络镜像赛,分别答对了两道题和三道题.感觉自己完全被虐了.发现了很多自己应该去掌握的知识,找到了自己的差距.容斥原理,博弈论,等等,这将是我努力的方向. 在跟大神同学和学姐交流的过程 ...

  8. 集成shareSDK的微信、QQ API导致cocoaPods找不到类symbol问题的解决方法

    因为shareSDK的微信和QQ API都只支持32位的,而cocoaPods默认要支持64位的,所以如果在工程中导入这两个API会出问题. 解决方法我就不转载啦,原文在这里: http://blog ...

  9. Intelli IDEA 使用教程

    1.怎样修改字体 File-Settings-color&Fonts-Fonts

  10. 实战荟萃-UI篇

    一. 前言 平时在处理问题的时候,经常会遇到一些奇奇怪怪的问题,今天在这里将其记录下来.这里将会列举几个常用的UI问题进行讲解 二. 导航栏 iOS导航栏绝对是个巨坑.和很多朋友聊天都是自己实现了一套 ...