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

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中使用Maven建web工程项目

    在eclipse中使用Maven建web工程项目: 第一种方式: 右键新建maven工程,勾选创建一个简单工程 填入信息,注意打包方式要改为war 点击完成,创建完的工程目录如下: 项目中没有WEB- ...

  2. Unity 检测物体是否在相机视野范围内

    需求: 类似NPC血条,当NPC处于摄像机视野内,血条绘制,且一直保持在NPC头顶. 开始: 网上查找资料,然后编写代码: public RectTransform rectBloodPos; voi ...

  3. [.NET] 《Effective C#》读书笔记（二）- .NET 资源托管

    <Effective C#>读书笔记(二)- .NET 资源托管 简介 续 <Effective C#>读书笔记(一)- C# 语言习惯. .NET 中,GC 会帮助我们管理内 ...

  4. ms_celeb_1m数据提取（MsCelebV1-Faces-Aligned.tsv）python脚本

    本文主要介绍了如何对MsCelebV1-Faces-Aligned.tsv文件进行提取 原创by南山南北秋悲 欢迎引用!请注明原地址 http://www.cnblogs.com/hwd9654/p/ ...

  5. JavaScriptCore全面解析 （下篇）

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 殷源,专注移动客户端开发,微软Imagine Cup中国区特等奖获得者,现就职于腾讯. 接JavaScript ...

  6. C++学习 cout的格式化输出

    cout的格式化输出 1.常用: ①double 输出到小数点后n位:(保留精度 n位) #include <iostream> #include <iomanip> usin ...

  7. ubuntu系统搭建以太坊私有链

    1.安装curl.git apt-get update apt-get install git apt-get install curl 2.安装go curl -O https://storage. ...

  8. IOS开发常见错误

    . 问题表现:什么情况?方法居然无法拉线? 问题简述:ios的空间拉线到一个.h .m文件中 居然多次拖动无效.. 问题解决:ios的空间响应单单在代码中创建一个方法是没用的,这个时候通常跟空间是没有 ...

  9. Python实现脚本锁功能，同时只能执行一个脚本

    1. 文件锁 脚本启动前检查特定文件是否存在,不存在就启动并新建文件,脚本结束后删掉特定文件. 通过文件的判断来确定脚本是否正在执行. 方法实现也比较简单,这里以python脚本为例 #coding= ...

  10. fir.im 持续集成技术实践

    互联网时代,人人都在追求产品的快速响应.快速迭代和快速验证.不论是创业团队还是大中型企业,都在探索属于自己的敏捷开发.持续交付之道.fir.im 团队也在全面实施敏捷,并推出新持续集成服务 - flo ...