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. LVM命令摘要

      命令 描述 物理卷(PV) pvcreate 创建LVM磁盘     #pvcreate /dev/sdb pvdisplay 显示卷组中的物理卷信息 pvchange 设置PV的性能,允许或拒绝 ...

  2. 小学生之浅谈Struts2与struts1的运行机制

    Struts1工作原理图: 1.初始化:struts框架的总控制器ActionServlet是一个Servlet,它在web.xml中配置成自动启动的Servlet,在启动时总控制器会读取配置文件(s ...

  3. JavaBean-Servlet-JavaServerPage（转）

    1.servlet servlet是在服务器端执行的,具有良好的移植性,不论操作系统是Windows.Linux.Unix等等,都能将写好的Servlet程序放在这些操作系统上执行,是真正的写一次,到 ...

  4. JS相关链接

    给开发者提供的 35 款 JavaScript 图形图表库: http://news.cnblogs.com/n/201518/ 主题:[前端必看]JavaScript推荐资料合集: http://w ...

  5. Memcached 深度分析

    Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库 负载,提升性能.关于这个东西,相信很多人都用过,本文意在通过 ...

  6. MSSQL 字符串替换语句

    MSSQL替换语句:update 表名 set 字段名=replace(cast(字段名 as varchar(8000)),'abc.com','123.com')例如:update PE_Arti ...

  7. PHP Zip File

    安装 如需在服务器上运行 Zip File 函数,必须安装这些库: Guido Draheim 的 ZZIPlib 库: 下载 ZZIPlib 库 Zip PELC 扩展:下载 Zip PELC 扩展 ...

  8. 软件测试 homework2

    1. 程序1:   for循环的i>0改为i>=0: 程序2:   for循环for (int i = 0; i < x.length; i++)改为for (int i = x.l ...

  9. 快速幂：quickpow

    众所周知,快速幂是优化对数的次方运算的最普遍手段.在学习快速幂的思想时,其分治思想容易让大家用简单的递归实现. 但其实,除了递归之外,更好的方法会是简单的 WHILE循环.下面贴代码: #includ ...

  10. MapReduce UnitTest

    通常情况下,我们需要用小数据集来单元测试我们写好的map函数和reduce函数.而一般我们可以使用Mockito框架来模拟OutputCollector对象(Hadoop版本号小于0.20.0)和Co ...