一、背景属性

　　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. requests库

    还没整理,先贴俩链接. https://www.cnblogs.com/lilinwei340/p/6417689.html http://docs.python-requests.org/zh_CN ...

  2. C# 链表去重 List 一维 二维 分别使用 Distinct() GroupBy() 方法

    分别使用List中Distinct(),GroupBy()实现链表的去重. 1.先上效果: 一维链表中分别有元素“aa”,"bb",'aa','aa',"cc" ...

  3. racle SQL性能优化

    (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先 ...

  4. Wireshark使用介绍（二）：应用Wireshark观察基本网络协议

    TCP: TCP/IP通过三次握手建立一个连接.这一过程中的三种报文是:SYN,SYN/ACK,ACK. 第一步是找到PC发送到网络服务器的第一个SYN报文,这标识了TCP三次握手的开始. 如果你找不 ...

  5. pickel加速caffe读图

    64*64*3小图(12KB),batchSize=128,训练样本100万, 全部load进来内存受不了,load一次需要大半天 训练时读入一个batch,ali云服务器上每个batch读入时间1. ...

  6. Web前端培训教程：CSS3动画怎么实现的

    动画 CSS3属性中有关于制作动画的三个属性: transform,transition,animation keyframes @keyframes mymove{ from{初始状态属性} to{ ...

  7. python简单制作GIF

    第一步安装工具:imageio (已安装好的页面) 第二步:打开python 插入代码,代码如下. import imageio savename = "C://Users//Thinkpa ...

  8. war包安装jenkins

    转自:https://blog.51cto.com/bigboss/2129358 系统环境: CentOS 7.5 1804 IP:192.168.1.3 关闭selinux.firewalld j ...

  9. 词云（wordcloud2.js js2wordcloud.js）

    npm安装: npm install js2wordcloud --save 用法 var wc = new Js2WordCloud(document.getElementById('contain ...

  10. standby_file_management参数为MANUAL导致添加数据文件错误

    症状:standby_file_management 在MANUAL模式下添加数据文件报错处理: 1.standby_file_management为MANUAL,主库添加数据文件,从库发现如下报错: ...