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

  • background-color 设置背景颜色
  • background-image 设置背景图片地址
  • background-repeat 设置背景图片如何重复平铺
  • background-position 设置背景图片的位置
  • background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

举例：
下面这些例子使用下面这张图片做为背景图：

1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。

2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。

3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。

4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。

5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。

6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。

相关代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test background</title>

    <style type="text/css">

        .backshow{

            width:320px;

            height:160px;

            border:3px solid #333;

            float:left;

            margin:10px;

        }

        .bg1{background:cyan url(bg.jpg);}

        .bg2{background:cyan url(bg.jpg) repeat-x;}

        .bg3{background:cyan url(bg.jpg) repeat-y;}

        .bg4{background:cyan url(bg.jpg) no-repeat;}

        .bg5{background:cyan url(bg.jpg) no-repeat left center;}

        .bg6{background:cyan url(bg.jpg) no-repeat right center;}

    </style>

</head>

<body>

    <div class="backshow bg1"></div>

    <div class="backshow bg2"></div>

    <div class="backshow bg3"></div>

    <div class="backshow bg4"></div>

    <div class="backshow bg5"></div>

    <div class="backshow bg6"></div>

</body>

</html>

　　

例子说明：
代码中使用到的背景图片，可以直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，并且和网页文件存在同一个目录下。

关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景。

比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：

用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，如果不设置background-position，默认背景图的左上角会和盒子的左上角对齐，如果设置，可以用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：

对应代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test background</title>

    <style type="text/css">

        .backshow{

            width:320px;

            height:160px;

            border:3px solid #333;

            float:left;

            margin:10px;

        }

        .bg{width:94px;

            height:94px;

            border:3px solid #666;

            background:url(location_bg.jpg) -110px -150px;

        }

    </style>

</head>

<body>

    <div class="bg"></div>

</body>

　　

</html>

css中设置background属性的更多相关文章

  1. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  2. css中的background属性

    第一次写博客,我就写写今天在编写网页的过程中,对background的两种运用,一是background中的线性渐变,对背景的渐变我其实是很少使用的,所以今天在写的时候我用css3的帮助手册,back ...

  3. css中的border-collapse属性如何设置表格边框线？（代码示例）

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  4. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  5. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  6. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  7. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. 对CSS中的Position属性的一些深入探讨

    转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...

  9. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

随机推荐

  1. shell判断文件类型和权限

    shell  判断文件类型. -d 文件 判断该文件是否存在,并且是否为目录(是目录为真) -e文件 判断该文件是否存在(存在为真) -f文件 判断该文件是否存在,并且是否为文件(是普通文件为真) - ...

  2. 对比Nginx配置文件差异

    一.概要: Python2 官方文档:https://docs.python.org/2/library/difflib.html Python2 官方文档:https://docs.python.o ...

  3. jsp页面数据分页模仿百度分页效果

    <%@page import="web09.shop.DBUtil"%> <%@page import="java.sql.ResultSet" ...

  4. Java中String类型详解

    这篇博客是我一直想总结的,这两天一直比较忙,先上传下照片吧,过后有时间再弄成正常的. 本文主要是对Java中String类型的总结,包括其在JVM中是怎么存储的...

  5. DPDK收发包全景分析

    前言:DPDK收发包是基础核心模块,从网卡收到包到驱动把包拷贝到系统内存中,再到系统对这块数据包的内存管理,由于在处理过程中实现了零拷贝,数据包从接收到发送始终只有一份,对这个报文的管理在前面的mem ...

  6. [C++] Memory_stack_heap

    STACK_HEAP_MEMERY_MAP NOTICE: For p1 , where is the address of p1 ?(0x200400) IN STACK For p1 , wher ...

  7. SliceBox

    SliceBox相当于一个轮播图插件,只不过是3D的. 先来查看它能实现的效果: 官网:http://tympanus.net/codrops/2011/09/05/slicebox-3d-image ...

  8. NHibernate获取实体配置信息（表名，列名等等）

    // 注意这里有个&符号,并不是写错了,而是约定 就是这样写的ctx.GetObject("&SessionFactory") 这是官网地址http://nhfor ...

  9. Java Persistence with MyBatis 3(中文版) 第五章 与Spring集成

    MyBatis-Spring是MyBatis框架的子模块,用来提供与当前流行的依赖注入框架Spring的无缝集成. Spring框架是一个基于依赖注入(Dependency Injection)和面向 ...

  10. 手机优秀app

    Mantano 阅读器 Aldiko   阅读器 掌阅阅读器 奇特阅读器 Gitden reader 网易蜗牛阅读