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

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. Eclipse实现图形化界面插件-vs4e

    vs4e插件下载地址:http://visualswing4eclipse.googlecode.com/files/vs4e_0.9.12.I20090527-2200.zip 下载完成后,解压,然 ...

  2. Unity Debug类

    静态变量 developerConsoleVisible 报告是否开发控制台是可见的.开发控制台不能出现使用: isDebugBuild 在构建设置对话框中有一个叫做"发展构建"复 ...

  3. Hive 的简单使用及调优参考文档

    Hive 的简单使用及调优参考文档   HIVE的使用 命令行界面 使用一下命令查看hive的命令行页面, hive --help --service cli 简化命令为hive –h 会输出下面的这 ...

  4. Android SQLite与ListView的简单使用

    2017-04-25 初写博客有很多地方都有不足,希望各位大神给点建议. 回归主题,这次简单的给大家介绍一下Android SQLite与ListView的简单使用sqlite在上节中有介绍,所以在这 ...

  5. 在同一个系统上装两个不同版本的jdk，配置环境变量不起作用，jdk版本的切换问题

    本人这台笔记本前面装了jdk8,现在准备用jdk7,我安装好了jdk7:把系统变量中的JAVA_HOME 改为 D:\java\jdk\jdk7\jdk1.7.0_67,Path 下添加如下变量,记得 ...

  6. PHP 安装 Xdebug 扩展（一）

    一.前言 1. Xdebug 简介 Xdebug 是一个开放源代码的 PHP 程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况.当前最新版本为 Xdebug 2.5.0 ...

  7. python3 selenium 切换窗口的几种方法

    第一种方法: 使用场景: 打开多个窗口,需要定位到新打开的窗口 使用方法: # 获取打开的多个窗口句柄windows = driver.window_handles# 切换到当前最新打开的窗口driv ...

  8. Haoop基本操作

    一．HDFS的常用操作 (一).HDFS文件的权限 与Linux文件权限类似 r: read; w:write; x:execute,权限x对于文件忽略,对于文件夹表示是否允许访问其内容. 如果Lin ...

  9. python 小程序—循环和列表训练

    a=input('please input your salary:') purchase=[] while True: products=[[1,'iphone',5800],[2,'book',5 ...

  10. javascript设计模式详解之命令模式

    每种设计模式的出现都是为了弥补语言在某方面的不足,解决特定环境下的问题.思想是相通的.只不过不同的设计语言有其特定的实现.对javascript这种动态语言来说,弱类型的特性,与生俱来的多态性,导致某 ...