index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

      <link href="style.css" type="text/css" rel="stylesheet">

 </head>

 <body>

       <p>测试一下背景是否可以继承（不能）</p>

 </body>

 </html>

css

 body{

     background-color:gray; /*设置背景颜色 */

 }

 p{

     padding: 10px;  /*设置内边框 */

     width: 150px;  /*设置宽度 */

     background-color: red;

 }

效果：

2、设置图片背景

css代码：设置body的背景图片

body{

    background-image: url("img.jpg");

}

设置单个标签的背景图片

p{

    width:200px;

    background-image: url("img.jpg");

}

设置图片是否重复和起始位置：

 body{

     background-image: url("img.jpg");

     background-repeat: no-repeat;  /*设置图片是否重复*/

     background-position: right top;  /*设置图片的起始位置*/

                         /*right代表从页面的right和从图片的center开始显示*/

                         /*还可指定具体的数值如0px，0px*/

                         /*还可指定百分数*/

 }

设置图片是否随着内容滚动

 body{

     background-image: url("img.jpg");

     background-repeat: no-repeat;  /*设置图片是否重复*/

     background-attachment: fixed;/*设置图片是否随着内容滚动*/

 }

CSS3背景：

设置图片的大小

 body{

     background-image: url("img.jpg");

     background-repeat: no-repeat;  /*设置图片是否重复*/

     background-size:1000px 1000px;/*设置图片的大小*/

 }

Css背景的更多相关文章

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

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

  2. 你不知道的CSS背景—css背景属性全解

    CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...

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

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

  4. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  5. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  6. CSS背景样式

    CSS是级联样式表,用来表现HTML等文件样式的语言,CSS能够真正做到网页的表现与内容分离的设计语言,也就是说,做好了一款网页,可以通过另一个后缀名是css的文件进行修改其中的样式,不过在html的 ...

  7. CSS背景图拉伸自适应尺寸，全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

  8. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  9. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  10. CSS背景属性

    CSS背景属性 1.background-attachment 属性 scroll:默认值.背景图像会随着页面其余部分的滚动而移动. fixed:当页面的其余部分滚动时,背景图像不会移动. inher ...

随机推荐

  1. 单线程与多线程的简单示例(以Windows服务发短信为示例)

    单线程示例: public delegate void SM(); SM sm = new SM(() =>    {                    while (true)       ...

  2. OD: Vulnerability Detection

    终于看完第二篇漏洞利用原理高级篇,内容虽然看懂了,但深入理解不够,这部分内容以后还要不断强化. 第三篇是漏洞挖掘技术,篇首的话中,提到程序的不可计算性(图灵机的停机问题).希伯尔数学纲领的失败,结尾说 ...

  3. [JavaScript]plupload多图片上传图片

    var uploader = new plupload.Uploader({ //创建实例的构造方法     runtimes: 'html5,flash,silverlight,html4',    ...

  4. 看android的书的体会

    android书上面的代码有时候有问题,可以在网上搜索这些功能.网上和官方文档里面有很好的说明和例子.

  5. Arcgis server - ' packaging failed '

    我在使用ARCCatalog发布地图服务时,报这个错:packaging failed 然后我从头试,发现它提示说我的目录'C:\Users\Administrator\AppData\Local\E ...

  6. Ubuntu小私房(4)--Linux系统目录结构

    Linux目录结构是Linux学习者必须了解的知识,Linux的目录与Windows又有很大的不同,所以搞清楚Linux目录结构是关键. Linux文件类型 (部分转自ChinaBytel) linu ...

  7. Linux(Centos、Debian)之安装Java JDK及注意事项（转）

    --转自:http://www.cnblogs.com/hanyinglong/p/5025635.html 说明:本人是以Debian 操作系统来进行安装的,这篇文章有很大帮助,才学Linux对有些 ...

  8. Microsoft OLE DB Provider for SQL Server 错误 '80040e21'

    我的是因为数据库满了,正在向服务商申请增加数据库容量 原文地址:Microsoft OLE DB Provider for SQL Server 错误 '800作者:欧阳IT记事本 昨天打开网站还正常 ...

  9. salt-grains

    自定义grains 的方法 1: 在minion 的配置文件夹 /etc/salt/minion.d  下面包含的配置文件  grains.conf 2: 在salt的安装目录中建立grains 文件 ...

  10. OC学习篇之---通知(NSNotificationCenter)

    在前一篇文章中我们介绍了OC中很常用的两个技术:KVC和KVO: http://blog.csdn.net/jiangwei0910410003/article/details/41912937,今天 ...