一、背景属性

　　1.1、背景颜色background-color

    <style>

        /*浮动，横向排列*/

        div{float: left;}

/*background-color属性值支持三种形式：

 name - 指定颜色的名称，如 "red" ；

RGB - 指定 RGB 值, 如 "rgb(255,0,0)"  ；

Hex - 指定16进制值, 如 "#ff0000"。*/

        .one{

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .two{

            width: 100px;

            height: 100px;

            background-color: rgb(0,277,0);

        }

        .three{

            width: 100px;

            height: 100px;

            background-color:#66FFFF;

        }

    </style>

    <body>

        <div class="one"></div>

        <div class="two"></div>

        <div class="three"></div>

    </body>

　　　　代码执行如下图：

　　1.2、背景图片background-iamge

    <style>

        div{

            width: 200px;

            height: 200px;

            border: 3px solid red;

            background-image: url(img/love.jpg);

        }

    </style>

    <body>

        <div></div>

    </body>

　　　　代码执行如下图：

　　1.3、背景是否重复background-repeat

    <style>

        div{

            width: 490px;

            height: 200px;

            border: 3px solid red;

            background-image: url(img/love.jpg);

            /*默认 重复repeat*/

            background-repeat:no-repeat;

        }

    </style>

　　　　代码执行如下图：

　　

　　1.4、背景是否固定background-attachmen（属性值默认为scroll）

    <style>

        body{

            width: 490px;

            height: 200px;

            background-image: url(img/love.jpg);

            background-repeat:no-repeat;

            background-attachment:fixed;

        }

    </style>

　　　　默认scroll效果图：

　　　　设置fixed运行效果图：

　　1.5、背景图像的开始位置background-position

　　　　

　　

    <style>

        div{

            float: left;

            width: 300px;

            height: 300px;

            border: 3px solid red;

            margin: 10px;

            background-image: url(img/love.jpg);

            background-repeat:no-repeat;

        }

        .one{

            background-position: center;

        }

        .two{

            background-position: bottom right;

        }

        .three{

            background-position: 10% 40%;

        }

        .four{

            background-position: 40px 10px;

        }

    </style>

    <body>

        <div class="one"></div>

        <div class="two"></div>

        <div class="three"></div>

        <div class="four"></div>

    </body>

　　　　代码执行效果图:

二、背景复合样式background（颜色可以写在最前面|最后面）

    <style>

            /*复合样式下设置fixed后position位置根据可视区域设置

         　复合样式下设置scroll后position位置根据元素自身设置*/

        div.one{

            width: 700px;

            height: 300px;

            border: 3px solid #000;

            background:pink url(img/love.jpg) no-repeat scroll center;

        }

    </style>

第三、兼容

所有浏览器都支持 background 属性。

注意：inherit：IE7 以及更早的浏览器不支持 "inherit"。IE8 需要声明 !DOCTYPE。IE9 支持 "inherit"。

background——背景属性的更多相关文章

  1. css中background背景属性概

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

  2. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  3. css中background背景属性概述

    background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...

  4. css background 背景知识详解

    background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...

  5. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  6. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  7. CSS下背景属性background的使用方法

    背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...

  8. CSS背景属性background

    background属性是所有背景属性的缩写: 以下是这些背景属性: background-color:背景颜色 你可以通过颜色名称(red/green/blue)来设置 也可以用十六进制(#fff/ ...

  9. background 背景类八大属性

    background 背景类八大属性 背景颜色(当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上) background-image:背景图像 background-repeat:背景图像 ...

随机推荐

  1. EXCEL 如何实现下拉填充公式，保持公式部分内容不变，使用绝对引用

    EXCEL 如何实现下拉填充公式,保持公式部分内容不变,使用绝对引用 在不想变的单元格前加$符号(列标和列数,两个都要加$),变成绝对引用,默认情况是相对引用 L4固定不变的方式:$L$4 M4固定不 ...

  2. GO函数

    函数定义 Go语言中定义函数使用func关键字. func 函数名(参数)(返回值){ 函数体 } 函数名:由字母.数字.下划线组成.但函数名的第一个字母不能是数字.在同一个包内,函数名也称不能重名( ...

  3. linux单项目发布流程

    1.安装python #1.安装python3.7所需要的依赖包yum -y groupinstall "Development tools"yum -y install zlib ...

  4. java消息服务学习之JMS概念

    JMS即Java消息服务(Java Message Service)应用程序接口是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消息,进行异步通信. ...

  5. XUnit测试框架-Python unittest

    选择 语言选择 本次个人作业我选择的语言是Python,了解学习Python有一段时间了但是一直没有练习,所以这次玩蛇,使用的版本是Python3.6. 开发工具选择 我选择的IDE是Pycharm, ...

  6. 开启text汇聚排序

    开启text汇聚排序 curl -X PUT "http://192.168.1.136:19200/hxl_test/_mapping/tb_test" -H 'Content- ...

  7. iperf详细使用方法

    Iperf  是一个网络性能测试工具.Iperf可以测试TCP和UDP带宽质量.Iperf可以测量最大TCP带宽, 具有多种参数和UDP特性.Iperf可以报告带宽,延迟抖动和数据包丢失. Iperf ...

  8. 机器学习总结（一） Adaboost,GBDT和XGboost算法

    一: 提升方法概述 提升方法是一种常用的统计学习方法,其实就是将多个弱学习器提升(boost)为一个强学习器的算法.其工作机制是通过一个弱学习算法,从初始训练集中训练出一个弱学习器,再根据弱学习器的表 ...

  9. HTML解析之BeautifulSoup

    BeautifulSoup是一个用于从HTML和XML文件中提取数据的Python库.BeautifulSoup提供一些简单的.函数用来处理导航.搜索.修改分析树等功能.BeautifulSoup模块 ...

  10. export ，export default 和 import 区别 以及用法

    首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口i ...