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. css中的垂直居中方法

    单行文字 (外行高度固定) line-height 行高, 将line-height值与外部标签盒子的高度值设置成一致就可以了. height:3em; line-height:3em; 多行文字 图 ...

  2. 关于安装PHP补装PDO与PDO_MYSQL操作

    我这里是通过PHP源码包来安装的 1.安装pdo cd到你的PHP源码包下的ext/pdo目录,然后执行如下操作: #/usr/local/php/bin/phpize   (/usr/local/p ...

  3. 线段树---HDU1754 I hate it

    这个题也是线段树的基础题,有了上一个题的基础,在做这个题就显得比较轻松了,大体都是一样的,那个是求和,这个改成求最大值,基本上思路差不多,下面是代码的实现 #include <cstdio> ...

  4. codevs 2451 互不侵犯（状丫dp）

    /* 好神奇好神奇...表示自己要学的还很多 注意到n<=9 不是搜索就是状丫 搜索+剪枝 70分 枚举放或者不放 这里用状丫 f[i][j][k] 表示前i行 放了j个国王 i行的状态是k的方 ...

  5. LINQ Enumerable 续

    筛选序列 Enumerable.Distinct 对于复杂的对象列表,运行时引擎如何才能通过比较确定两个对象是否重复?对于复杂对象,必须提供一个比较器,即实现IEqualityComparer(Of ...

  6. 如何在github上传自己的项目

    1.首先在github创建自己的账号. 2.下载github for windows 客户端 (备注:这里我的电脑是windows系统的) ,不要下载错了,网上下载的应该是这样的安装程序 3.安装gi ...

  7. 查看oracle数据库下面的所有的表,执行某个sql脚本：

    查看oracle数据库下面的所有的表: select * from user_tables;//user为用户名 执行某个sql脚本: SQL>@e 文件名.sql

  8. php 设置报错等级

    定义和用法:    error_reporting() 设置 PHP 的报错级别并返回当前级别. 函数语法:    error_reporting(report_level) 如果参数 level 未 ...

  9. java数据库连接类，已经把数据库操作的方法都封装好了

    在这里分享一个已经封装好了的java数据库连接类,只要创建对象就可以实现数据库的增删改查操作,用过都说好.其实这个不是我自己写的,是一个理解和学习能力超高的朋友写的,他也很乐于分享交流,本人也深受他的 ...

  10. printf格式输出总结

    #include<stdio.h>    #include<string.h>    int main()    {        ];        ;       floa ...