属性解释 
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. git服务器搭建问题

    CentOS6.5本地搭建. 对于图形化的系统,可以联网,然后CTRL+ALT+F2可以切换到命令行,CTRL+ALT+F1可以切换回桌面图形化. 可以用SSH和FTP来连接服务器和传文件.   (1 ...

  2. mybatis+oracle如何批量执行多条update

    接口 public void setStatus(List<Columns> columnsList); mapping xmlmapping 中使用foreach,关于标签的使用,资料非 ...

  3. tomcat安装后,双击start.bat闪退的问题

    1.jdk环境变量没有配 解决方案:我的电脑-属性-高级-环境变量,新增下面三个环境变量: ①JAVA_HOME=C:\Program Files\Java\jdk1.7.0_09(就是你jdk安装的 ...

  4. 单例模式的N种写法

    单例模式算是设计模式中最容易理解,也是最容易手写代码的模式了吧.但是其中的坑却不少,所以也常作为面试题来考.本文主要对几种单例写法的整理,并分析其优缺点.很多都是一些老生常谈的问题,但如果你不知道如何 ...

  5. 王子和公主 UVa10635

    [题目描述]:王子和公主 一个王子和公主在n*n的格子中行走,这些格子是有1....n^2的编号的.现在给定p+1个数,再给定q+1个数,公主和王子可以选择其中某些格子行走,求他们最多能走几个相同的格 ...

  6. Linux网络配置之虚拟网卡的配置（Red Hat 6.5）

    怎么查看当前的网络状态,这里就不着重描述,用ifconfig命令就可以.我们直接进入主题. red hat系统中的网卡配置在这个目录中:/etc/sysconfig/network-scripts 1 ...

  7. wins 软件安装

    1.x86 x64区别86就是原来的32位操作系统64就是现在比较新的64位操作系统

  8. firefox ubuntu 中文包

    sudo apt-get install firefox-locale-zh-hans

  9. word上传博客教程

    目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...

  10. ScreenCapturePro2 for Joomla_3.4.7-tinymce4x

    1.1. 与Joomla_3.4.7-tinymce4x整合 示例下载:Joomla_3.4.7,   1.1.1. 添加screencapture文件夹   1.1.2. 2.添加插件文件夹 路径: ...