背景分为—背景颜色和背景图片

1.背景属性

2.背景颜色

代码演示：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div{

                width: 300px;

                height: 300px;

                border: 10px solid red;

                /*背景颜色三种表示方法:颜色的单词,rgb,16进制*/

                background-color:green;

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

                background-color:#008800;

            }

        </style>

    </head>

    <body>

        <div>

        </div>

    </body>

</html>

3.背景图片

背景图片有：位置 重复性

代码演示：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div{

                width: 300px;

                height: 300px;

                border: 10px solid red;

                /*背景图片*/

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

                /*背景图片是否重复：repeat

                 * repeat-x横向重复

                 * repeat-y纵向重复

                 * no-repeat不重复

                 * */

                background-repeat: no-repeat;

                background-repeat: repeat-x;

                background-repeat: repeat-y;

                /*

                 background-position:x y;   背景图片的位置

                 传数值：（背景图片离左上角的距离）

                            x:

                                正值      从容器的左边往右边走的距离

                                负值      从容器的左边往左边走的距离

                            y:

                                正值      从容器的上边往下边走的距离

                                负值      从容器的上边往上边走的距离

                    传关键字

                            x:

                                left        图片在容器的左边

                                center  图片在容器X轴的中心

                                right   图片在容器的右边

                            y:

                                top     图片在容器的上边

                                center  图片在容器Y轴的中心

                                bottom  图片在容器的下边

                 * */

                background-position: 5px 10px;

            }

        </style>

    </head>

    <body>

        <div></div>

    </body>

</html>

一天搞定CSS：背景background--03的更多相关文章

  1. CSS背景background、background-position使用详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  2. CSS背景background详解，background-position详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  3. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  4. CSS背景background图片

    一.CSS背景background图片   -   TOP 1.背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图 ...

  5. CSS 背景background实例

    css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...

  6. CSS 背景 background 讲解

    背景语法:background: background-color || background-image || background-repeat || background-attachment ...

  7. css 背景(background)属性、背景图定位

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

  8. 十分钟搞定CSS选择器

    在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. ...

  9. (转)十分钟搞定CSS选择器

    原文地址:http://www.cnblogs.com/dolphinX/p/3347713.html 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下 ...

随机推荐

  1. struts2 之 struts2类型转换

    1. 在struts2中,相比servlet来时,获取数据时,程序员没有进行手动的类型转换,类型转换工作都有struts2来完成处理,但愿对于自定义类型数据,struts2不会帮助我们完成类型转换工作 ...

  2. php checkbox 从数据库读取和写入

    checkbox将选中的值写入数据库中,在修改的时候如何从数据库中读取并设定Checkbox的状态 1.写入数据库提交后因为你的rol是数组,所以可以使用$_POST获取 PHP code   ? 1 ...

  3. Android sdk配置 常见问题及处理方法

    1. 下载sdk压缩包,解压后显示 2.双击SDK Manager.exe 程序进入如下界面 注:有的童鞋可能遇到如下问题 一般将一和二两种操作都完成就OK了 一. 更新sdk,遇到了更新下载失败问题 ...

  4. Linux防火墙配置—SNAT2

    1.实验目标 以实验"Linux防火墙配置-SNAT1"为基础,为网关增加外网IP地址,为eth1创建虚拟接口,使外网测试主机在Wireshark中捕获到的地址为eth1虚拟接口的 ...

  5. 一行code实现ADO.NET查询结果映射至实体对象。

    AutoMapper是一个.NET的对象映射工具. 主要用途 领域对象与DTO之间的转换.数据库查询结果映射至实体对象. 这次我们说说 数据库查询结果映射至实体对象. 先贴一段代码: public S ...

  6. Python13_day3

    http://www.cnblogs.com/wupeiqi/articles/4950799.html`` 学习流程 一.基本的学习方法 1,看视频,听懂老师的课程. 2,下课做笔记,将笔记的内容写 ...

  7. 需求收集实例三之 FM

    暂且叫这个项目叫FM.FM项目采用敏捷模式,需求的表现形式是Story. 此项目需求收集过程如下: 亮点:在公司第一次实践敏捷.用Story 而非 需求说明文档呈现需求. 败笔:没有处理好Story ...

  8. scp 命令快速使用讲解

    在 Linux 下使用 scp 命令 scp 是安全拷贝协议(Secure Copy Protocol)的缩写,和众多 Linux/Unix 使用者所熟知的拷贝(cp)命令一样.scp 的使用方式类似 ...

  9. 详解MySQL存储过程的“异常处理”

    阅读目录:存储过程的异常处理 定义异常处理 单一异常处理程序 continue exit 多个异常处理程序 关于错误编号和SQLSTATE码 使用3个处理程序 忽略某一异常的处理 异常处理的命名 异常 ...

  10. [原创]普通的MySQL多表连接查询