属性解释 
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. 蒟蒻LQL的博客

    这里是蒟蒻LQL的博客!!! 一枚水的不能再水的弱校ACMer···· 可能会在这写一些题解或者别的什么乱七八糟的··· 可能大概没什么人看,就当错题本好了o(*￣▽￣*)ブ 因为太弱了难免有错误!发 ...

  2. Tensorflow CIFAR10 (二分类)

    数据的下载: (共有三个版本:python,matlab,binary version 适用于C语言) http://www.cs.toronto.edu/~kriz/cifar-10-python. ...

  3. file_get_contents无法请求https连接的解决方法 php开启curl

    file_get_contents无法请求https连接的解决方法 方法1: PHP.ini默认配置下,用file_get_contents读取https的链接,就会如下错误: Warning: fo ...

  4. VMware安装完后，没有虚拟网卡

    1 问题描述: 1.1 windows10首次安装VMware,或者非首次安装VMware时,安装后,没有出现如下图所示的虚拟网卡: 1.2 Xshell或者SecureCRT 或者editplus等 ...

  5. Windows Server 2012 R2 Standard x64 deploy Visual Studio 2015 Application

    When I run the Server application on Windows Server 2012 R2 operation system. I meet the error:MSVCP ...

  6. JMS 之 Active MQ 的spring整合

    一.与spring整合实现ptp的同步接收消息 pom.xml: <!-- https://mvnrepository.com/artifact/org.springframework/spri ...

  7. Win10系统SQL数据库安装

    Win10系统MySQL数据库安装 1. 安装文件下载 下载地址: https://downloads.mysql.com/archives/community/ 下载版本: mysql-8.0.15 ...

  8. block functions区块函数插件的定义与使用

    在插件目录plugins里新建文件 block.插件名.php文件(如 block.插件名.php) 例:block.test2.php <?php function smarty_block_ ...

  9. Smarty配置与实例化

    在smarty文件夹下建立一个test文件夹,test下建立如下: 编辑test.php如下: <?php require('../smarty/Smarty.class.php'); $sma ...

  10. [GO]使用select实现斐波那契

    package main import "fmt" func fibonacci(ch chan <- int, quit <- chan bool) { x, y : ...