一、设置背景颜色：background-color

　　十六进制 background-color:#ff0000;
　　英文名称 background-color:red;
　　三原色 background-color:rgb(255,0,0)
　　transparent background-color:transparent;透明

<style type="text/css">

   h1{ background-color:rgb(255,0,0);}

</style>

</head>

<body>

    <h1>李克强主持召开<span>国务院</span>常务会议</h1>

</body>

如果希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

<style type="text/css">

   h1{ background-color:rgb(255,0,0); padding:20px;}

</style>

</head>

<body>

    <h1>李克强主持召开<span>国务院</span>常务会议</h1>

</body>

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

二、设置背景图片：

1.引入背景图片：background-image
　　URL background-image:url("bg.jpg")
　　none 不设置背景图片

2.设置背景图片的平铺方式：background-repeat
　　repeat 将背景图案填满整个背景。
　　repeat-x 将背景图案在水平方向添满
　　repeat-y 将背景图案在垂直方向添满。
　　no-repeat 图案只出现一次。

3.设置背景图片的位置：background-position
　　top left 设置背景图案出现在上左方。
　　top center 设置背景图案出现在上方中间。
　　top right 设置背景图案出现在上右方。
　　center left 设置背景图案出现在中间左方。
　　center center 设置背景图案出现在IE中间。
　　center right 设置背景图案出现中间右方。
　　bottom left 设置背景图案出现在下左方。
　　bottom 设置背景图案出现在正下方。
　　bottom right 设置背景图案出现在下右方。

　　也可以通过坐标准确的定位图片的位置(x,y) x水平方方向的位置 y垂直方向的位置，单位是像素(px)

4.设置背景图像是否会随视窗滚动而滚动：background-attachment
　　scroll 设置背景图像会随视窗滚动条的移动而移动(默认)。
　　fixed 设置背景图像不会随视窗滚动条的移动而移动。

背景图案简化格式:颜色 背景图片 repeat  attachment  position

<style type="text/css">

body{

    background-image:url(fads.png);

    background-repeat:no-repeat;

    background-position:center right;

    background-attachment:fixed;

    /*background:url(fads.png) no-repeat fixed center right;  简化方案*/

}

</style>

</head>

<body>

    <p>48、完美的男友：不吸烟，不喝酒，不欺骗。不存在！</p>

    <p>49、人生就像一块破铜烂铁，把它扔进火里，敲敲打打，也能炼出一副精品！</p>

    <p>50、话说动物园有一只猴子，奇丑无比，人见人吐！第二天我去看了，我吐了！第三天你去了，猴子吐了！</p>

    <p>25、哥是文明人，所有脏话均已使用唾液消毒。

    </p>

    <p>26、名人名言，你得先是名人了那才是名言，别人的屁都是名屁！你能比吗？

    </p>

    <p>27、您都好意思撒谎了，我哪敢好意思不信呢？

    </p>

    <p>28、为什么我眼里常含眼屎，那是我对睡眠爱的深沉。

    </p>

    <p>29、别以为你比我年轻，你就能多蹦跶几天，棺材装的是死人不是老人！

    </p>

    <p>30、我是穷人，请勿盗墓！</p>

    <p> 31、有时候老天下一场雨，是因为世界需要洗一洗；有时候眼睛下雨了，是因为心需要洗一洗！

    </p>

    <p>32、站在岁月的岸边，向自己的过往打个水漂吧……</p>

    <p>33、2011我娶你，2012我保护你，2013爱你一生，2014爱你一世！  </p>

    <p>34、人生就像一场旅行，在乎的不是目的地。而是沿途的"SB"，以及对付"SB"时的心情！  </p>

    <p>35、臭男人都喜欢骚女人。</p>

    <p> 36、系好安全带，前方也许有场爱情正等着你。  </p>

    <p>37、枕着打印机睡，就能打印出一整夜的梦吧？  </p>

    <p>38、没有强大的主人，别以为你是狗就可以乱咬人！</p>

    <p> 39、我只顾着往后看，却没有在意前面的路有多长。  </p>

    <p>40、最近神马开始变驴腿了，浮云变雨水了！</p>

    <p> 41、昨天是历史，今天是开始，明天谁都不好使！  </p>

    <p>42、还是10086对我好，我给他发一条对短信，他给我回3条。  </p>

    <p>43、靠山吃山，靠水吃水，今天抢劫，不许不给，谁要反抗，让他见鬼。  </p>

    <p>44、今天MM的生日，为了第一个送上祝福，凌晨我准时拿起手机发了一条信息：沙发。  </p>

    <p>45、知道高晓松为啥喝醉酒不？那是因为药家鑫想让他唱一首"同牢的你"。</p>

    <p> 46、地铁上的广告：挤吗？买辆车吧！出租车上的广告：赌吗？坐地铁吧！靠，忽悠我还是怎么着！  </p>

    <p>47、一般般的我，一般般的亮。一般般的你，我看不上！</p>

</body> 
<style type="text/css">

div{

    width:800px;

    height:600px;

    background-color:#ccc;

    background-image:url(fads.png);

    background-repeat:no-repeat;

    background-position:top right;

    /*background-attachment:fixed;当给一个div设置背景时使用该属性有可能无效*/

    /*background:url(fads.png) no-repeat fixed center right;  简化方案*/

}

</style>

</head>

<body>

<div>

    <p>35、臭男人都喜欢骚女人。</p>

    <p> 36、系好安全带，前方也许有场爱情正等着你。  </p>

    <p>37、枕着打印机睡，就能打印出一整夜的梦吧？  </p>

    <p>38、没有强大的主人，别以为你是狗就可以乱咬人！</p>

    <p> 39、我只顾着往后看，却没有在意前面的路有多长。  </p>

    <p>40、最近神马开始变驴腿了，浮云变雨水了！</p>

    <p> 41、昨天是历史，今天是开始，明天谁都不好使！  </p>

    <p>42、还是10086对我好，我给他发一条对短信，他给我回3条。  </p>

    <p>43、靠山吃山，靠水吃水，今天抢劫，不许不给，谁要反抗，让他见鬼。  </p>

    <p>44、今天MM的生日，为了第一个送上祝福，凌晨我准时拿起手机发了一条信息：沙发。  </p>

    <p>45、知道高晓松为啥喝醉酒不？那是因为药家鑫想让他唱一首"同牢的你"。</p>

    <p> 46、地铁上的广告：挤吗？买辆车吧！出租车上的广告：赌吗？坐地铁吧！靠，忽悠我还是怎么着！  </p>

    <p>47、一般般的我，一般般的亮。一般般的你，我看不上！</p>

</div>

</body>

下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。

另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。

三、练习：

1、使用 span 更好的控制文本中局部区域的文本
<span>文本内容</span>

<style type="text/css">

div span{ background:red}

</style>

</head>

<body>

<div>

    35、臭男人都<span>喜欢</span>骚女人。

</div>

</body>

2、使用 display 属性提供区块转换

<style type="text/css">

span{

    color:#0C0;

    width:100px;

    height:100px;

    background-color:#900;

    display:block;/*内联转换为区块*/

}

div{

    background-color:#F63;

    width:300px;

    height:50px;

    display:inline;/*区块转换为内联，width和height的属性就无效了*/

}

</style>

</head>

<body>

   <span>使用 span 更好的控制文本中局部区域的文本</span>

   <br/>

   <!--使用 display 属性提供区块转换--inline,block,none(不占位的隐藏)     内联标记设置长宽高没效果-->

    <span>使用 display 属性提供区块转换</span>

    <div>使用 display 属性提供区块转换</div>

 </body>

3、给标题加上一个小图标（最好使用背景来添加图标）

<style type="text/css">

    h5{

        background:url(das.gif) no-repeat left center;

        padding-left:20px;

    }

</style>

</head>

<body>

  <h5>给我加个小图标吧</h5>

 </body>

CSS控制背景的更多相关文章

  1. 纯CSS控制背景图片100%自适应填充布局

    https://blog.csdn.net/wd4java/article/details/50537562 解决:   html,body{height: 100%;width: 100%;marg ...

  2. css控制背景图片在浏览器中居中，下拉浏览器的时候背景图一直不变

    如 http://www.gm.com/ css样式如下 ;;} #con{ position:absolute; ; ; height:100%; width:100%; background-im ...

  3. CSS控制图片大小

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片:    对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...

  4. CSS控制超链接

    一.伪类 CSS控制元素的某种状态---偽类(用于向某些选择器添加特殊的效果)    偽类的语法:元素标签 偽类名称{属性:属性值;} 二.超链接        a:link:未访问的链接       ...

  5. [CSS]background背景

    css背景样式 序号  中文说明  标记语法  1  背景颜色  {background-color:数值}  2  背景图片  {background-image: url('imgpath/img ...

  6. css之背景(background)家族

    背景(background)是css中很重要的一部分,也是css的基础知道之一,现在来回顾css2中5个属性与css3中新增的3个属性和2个功能. CSS2_背景(background)前传 家族成员 ...

  7. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  8. CSS控制列表样式属性list-style有哪些？怎么用？

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  9. 键盘控制背景边框平滑移动（jquery）

    今天同事让我看了一个动画效果,是由键盘控制背景边框平滑移动,我感觉挺cool,所以我自己也动手制作了一个.目的是为了锻炼自己,看自己是否也能在短时间内实现. 先上图: 一.html代码 <!DO ...

随机推荐

  1. 几个Google中国的访问IP

    前面几个IP的访问速度比较快. 74.125.31.106 173.194.45.20 173.194.45.19 173.194.45.18 173.194.45.17 173.194.45.16 ...

  2. CSS兼容问题大全

    1.chorme 最小字体的兼容性. 问题描述:ff和IE最小字体可设置为1px,可是chorme中文版最小字体是12px,小于12px的字体全部显示为12px.解决方案:chorme支持CSS3的, ...

  3. 了解Javascript 变量

    javascript语言变量的作用域可以分为局部变量和全局变量 函数内部定义的变量为局部变量,作用范围在整个函数体内,函数外定义的变量为全局变量,如果在函数内部定义变量时没有使用关键字var,那么该变 ...

  4. .bash_profile和.bashrc的区别(如何设置生效)

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一个 ...

  5. linux下top命令查看cpu占用情况

    可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会以全屏的方式显示,并且会处在对话的模式 -- 用基于 top 的命令,可以控制显示方式等等.退出 top 的命令 ...

  6. Java：内部类

    1.内部类的定义: 一个内部类可以定义在另一个类里,可以定义在函数里,甚至可以作为一个表达式的一部分. 2.内部类的分类: Java中的内部类共分为四种: 成员内部类member inner clas ...

  7. Android异步下载图片并且缓存图片到本地

    Android异步下载图片并且缓存图片到本地 在Android开发中我们经常有这样的需求,从服务器上下载xml或者JSON类型的数据,其中包括一些图片资源,本demo模拟了这个需求,从网络上加载XML ...

  8. java开发--反射技术

    学习目标: 1.什么是反射:即反射的定义, 2.反射有什么作用,能解决什么问题, 3.反射的知识点是什么, 4.反射的利弊 5.反射的例子 1.什么是反射:反射的定义: a) 能够分析类能力的程序被称 ...

  9. android-exploitme（五）：不安全的数据存储

    今天我来看看如果android将数据存储在sdcard,它的权限是什么样的 1. 打开emm软件,做一笔转账.

  10. 计算CRC校验值（CRC16和CRC32）（网络传输检验）

    CRC有非常多的模式,我没有全部都做,目前支持 CRC16-Modbus CRC16-X25 CRC32 使用方法 auto data = QByteArray::fromHex( "01 ...