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

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. USACO Section 1.1-1 Your Ride Is Here

    USACO 1.1-1 Your Ride Is Here 你的飞碟在这儿 众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者.不幸的是,他们的飞碟每次出行都只能带上一组支 ...

  2. css伪类的组合用法

    利用伪类组合,可以用css代替js以达到目的,少些一下js .textarea:empty:before { display: block; content: '请输入'; color: #ababa ...

  3. AJAX应用案例之省市联动

    jsp 主要是要注意多Document的操作 <%-- Created by IntelliJ IDEA. User: YuWenHui Date: 2017/4/23 0023 Time: 1 ...

  4. 读书笔记 effective c++ Item 27 尽量少使用转型（casting）

    C++设计的规则是用来保证使类型相关的错误不再可能出现.理论上来说,如果你的程序能够很干净的通过编译,它就不会尝试在任何对象上执行任何不安全或无意义的操作.这个保证很有价值,不要轻易放弃它. 不幸的是 ...

  5. Java命名默认规范

    学习java的时候,命名的大小写经常弄混,所以在此总结一下java命名规范 1.project(项目名) 说法不一,暂定小写,eg:arraytest 2.包名 小写,eg:package array ...

  6. My SQL数据库的安装与配置

    MySQL是一个关系型数据库管理系统.MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语言 MySQL 软件采用了双授权政策,分为社区版和商业版,由于其体积小.速度快.总体拥有成本低,尤 ...

  7. 实现各种 CSS3 文本动画效果

    这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本动画插件,可以让你为网页中的文字运用各种动画. 源码下载     在线演示

  8. git 利用分支概念实现一个仓库管理两个项目

    需求描述:开发了一个网站,上线之际,突然另一个客户说也想要个一样的网站,但网站的logo和内部展示图片需要替换一下,也就是说大部分的后台业务逻辑代码都是一致的,以后升级时功能也要保持一致:刚开始想反正 ...

  9. cas 代理认证配置

    注:本文转自http://www.ichatter.net/2013/03/21/385/ CAS(Central Authentication Service)框架是一个开源的单点登陆框架.最近公司 ...

  10. 【react】利用prop-types第三方库对组件的props中的变量进行类型检测

    1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...