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. 第一章：在IDEA里搭建基于Forge的Minecraft mod开发环境

    <基于1.8 Forge的Minecraft mod制作经验分享> 网上关于Forge开发环境搭建的文章其实有不少,但大都是基于Eclipse的. 作为用Java开发的环境,怎么能没有ID ...

  2. Linux GRUB 2及修改默认启动项

    The GRUB 2 boot loader makes sure that you can boot Linux. GRUB 2 is installed in the boot sector of ...

  3. shape 填充 圆角矩形 圆形 环形

    属性 使用中可能出现的问题: 如果在某些手机中使用 shape 出现黑色填充背景,设置<solid android:color="@color/transparent"/&g ...

  4. Linux服务的管理

    1.Linux服务的介绍 系统服务 --某些服务的服务的对象是Linux系统本身,或者Linux系统系统用户,这类服务我们称为系统服务(System Service) 网络服务 --提供给网络中的其他 ...

  5. easyui-tree绑定数据的几种方式

    没想到easyui对json数据格式要求的那么严谨,折腾了半天 第一种直接使用标签方式,很容易就加载出来了: <ul class="easyui-tree"> < ...

  6. json数据获取

    今天Pei讲了一个android获取json数据的方式吧 代码什么的没看懂,反正知道就是那么一回事,用AsyncTask线程来获取json数据,我也不知道这样说对不对 估计以后回过来看的时候会发现一大 ...

  7. chrome Provisional headers are shown错误提示

    1.一般出现这个错误是请求没有发送成功 可能原因:在上传文件或ajax上传时指定的timeout,过时时间小 其他资料: http://www.duanzhihe.com/575.html http: ...

  8. xib添加手势后报错:-[UITapGestureRecognizer setFrame:]: unrecognized selector sent to instance xxx

    主要原因如下: + (instancetype)mineHeaderView { return [[NSBundle mainBundle] loadNibNamed:@"DDMineHea ...

  9. Android-第一个Android程序

    Android项目的目录结构及功能 目录 功能 gen 自动生成的文件,不要修改 assets 项目中自定义的需要用到的资源,Android平台不能识别 res 工程资源,Android平台能够识别, ...

  10. php获取汉字首字母

    php获取汉字首字母,可以用于按字母对数据进行检索排序等. 分享下网上找的代码.亲测有效. function getFirstCharter($str){ if(empty($str)){return ...