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

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. Linux下deb包安装工具（附带安装搜狗输入法）

    环境是在ubuntu14下的 #1.gdebi安装 使用deb安装工具gdebi,这个工具能解决所有依赖问题 sudo apt-get install gdebi #2.搜狗输入法 deb包下载地址: ...

  2. PHP 魔术方法 __call 与 __callStatic 方法

    PHP 魔术方法 __call 与 __callStatic 方法 PHP 5.3 后新增了 __call 与 __callStatic 魔法方法. __call 当要调用的方法不存在或权限不足时,会 ...

  3. Unity C# const与static readonly的区别与联系

    using System; namespace Test { class MainClass { //懒人写法的单例 class Weapon { public static readonly Wea ...

  4. 解决md5不是windows平台FIPS验证的加密算法的一部分的怪异问题

    一. 发生问题 临近下班时间的下午,领导一句话:项目先上到测试服吧,我明早来看看. 我想项目还没做完,先上到测试服务器,简单看下应该是没什么问题,部署也只是一会儿的事嘛,随后把手头的项目编译,发布,拷 ...

  5. HashMap 学习笔记

    先摆上JDK1.8中HashMap的类注释:我翻译了一下 /** * Hash table based implementation of the <tt>Map</tt> i ...

  6. Spring事务隔离级别与传播机制详解，spring+mybatis+atomikos实现分布式事务管理

    原创说明:本文为本人原创作品,绝非他处转载,转账请注明出处 1.事务的定义:事务是指多个操作单元组成的合集,多个单元操作是整体不可分割的,要么都操作不成功,要么都成功.其必须遵循四个原则(ACID). ...

  7. VueJS 组件参数名命名方式和前台显示

    camelCase(驼峰式) 和. kebab-case(短横线式) HTML 特性是不区分大小写的.所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应 ...

  8. python练习_12

    题目:敏感词文本文件 filtered_words.txt,里面的内容 和 0011题一样,当用户输入敏感词语,则用 星号 * 替换,例如当用户输入「北京是个好城市」,则变成「**是个好城市」.(11 ...

  9. 读 zepto 源码之工具函数

    Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性.目标对象的同名属性会被源对象的 ...

  10. 【整理】hash算法原理及常见函数

    简介 Hash,一般翻译做"散列",也有直接音译为"哈希"的,就是把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值.        散列表 ...