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. C#时间戳的获取与转换方法

    /// <summary> /// 获取当前时间戳 /// </summary> /// <param name="bflag"></pa ...

  2. Java基础知识强化96：Calendar类之获取任意年份的2月有多少天的案例

    1. 分析: (1)键盘录入任意的年份 (2)设置日历对象的年月日            年:就是(1)输入的数据            月:是2(3月份)            日:是1  (3)把 ...

  3. mysql删除数据库报错及解决方法

    前几天在测试环境的数据库上创建了一个数据库,发现不能授权也不能删除. 最后经过排查发现,数据库名称不能出现中划线 " - " , 那么,怎么才能把带有特殊字符的数据库呢? 操作时需 ...

  4. 95秀-dialog 进度对话框 实用工具

    工具Util public class DialogUtil {     public static ProgressDialogView progressDialog;     /**      * ...

  5. PLSQL编程基础

    一 PL/SQL简介 1 SQL:结构化的查询语句 2 PL/SQL优点与特性: 提高运行效率==>>提高运行效率的其他方式(存储过程,分页,缓存,索引) 模块化设计 允许定义标识符(变量 ...

  6. c# 预处理命令

    在编译之前进行的处理. 预处理命令以符号“#”开头. #define 只能 定义符号 不能定义宏(#define PI 3.14 这是错的,在c#中没宏) #region #endregion #if ...

  7. 合理使用Memcached进行缓存部署

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

  8. linux操作笔记

    [fedora可以ping通但是isReachAble返回false的原因] fedora18+ 防火墙设置原因,导致tcp端口不通,返回no route to host错误. 关闭防火墙命令: sy ...

  9. CADisplayLink的简单使用

    CADisplayLink类似NSTimer是一个定时器,只不过是一秒会调用60次指定的方法 使用方法: #import "ViewController.h" @interface ...

  10. 你好，C++（14）如何描述“一个名叫陈良乔，年龄33岁，身高173厘米，体重61.5千克的男人”——3.8 用结构体类型描述复杂的事物

    3.8  用结构体类型描述复杂的事物 利用C++本身所提供的基本数据类型所定义的变量,只能表达一些简单的事物.比如我们可以用int类型定义nAge变量表示人的年龄,用string类型定义strName ...