CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

一：背景色background-color 属性

p {background-color: gray;}

二：背景图像 background-image 属性

body {background-image: url(/i/eg_bg_04.gif);}

三：背景重复background-repeat 属性

　　属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。

　　repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，

　　no-repeat 则不允许图像在任何方向上平铺

　　

body

  {

  background-image: url(/i/eg_bg_03.gif);

  background-repeat: repeat-y;

  }

四：背景定位background-position 属性

　为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

　　扣洞原理实现一个张图片上，选择多个图标。

　　

效果如下：                        
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height: 100px;"></div>

    <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div>

</body>

</html>

五：背景关联background-attachment 属性

body

  {

  background-image:url(/i/eg_bg_02.gif);

  background-repeat:no-repeat;

  background-attachment:fixed

  }

css-css背景的更多相关文章

  1. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  2. CSS 设置背景透明度，不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  3. css 设置背景图片模糊，内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  4. CSS实现背景透明，文字不透明（各浏览器兼容）

    /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...

  5. CSS实现背景透明，文字不透明（各浏览器兼容） (转)

    /*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...

  6. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  7. CSS实现背景透明/半透明效果的方法

    全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...

  8. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  9. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  10. css插入背景图片底部有白边的解决方法

    相信很多小伙伴遇到过用CSS插入背景图时,底部出现白边的情况,如下图:   个人总结了2个方法如下: 解决方法1:给图片都加上 vertical-align: middle属性.有时,移动端也会有类似 ...

随机推荐

  1. BZOJ2802 [Poi2012]Warehouse Store 【贪心】

    题目链接 BZOJ2802 题解 这样的问题通常逆序贪心 每个\(A[i]\)只能用来满足后面的\(B[i]\) 就用当前\(A[i]\)不断提供给最小的\(B[i]\)即可 用一个堆维护 #incl ...

  2. Linux kernel（CVE-2018-17182）提权漏洞复现

    0x01 漏洞前言 Google Project Zero的网络安全研究人员发布了详细信息,并针对自内核版本3.16到4.18.8以来Linux内核中存在的高严重性漏洞的概念验证(PoC)漏洞利用.由 ...

  3. Android L开发指南

    导语:Android下一代操作系统“ L”对开发者意味着什么?ART模式能否让应用的体验超越苹果? 刚刚结束的 Google I/O大会上,Android下一代操作系统“ L”带来不少惊喜.新系统运行 ...

  4. spark 性能调优（一） 性能调优的本质、spark资源使用原理、调优要点分析

    转载:http://www.cnblogs.com/jcchoiling/p/6440709.html 一.大数据性能调优的本质 编程的时候发现一个惊人的规律,软件是不存在的!所有编程高手级别的人无论 ...

  5. python学习(24) 使用Xpath解析并抓取美女图片

    Xpath最初用来处理XML解析,同样适用于HTML文档处理.相比正则表达式更方便一些 Xpath基本规则 nodename 表示选取nodename 节点的所有子节点 / 表示当前节点的直接子节点 ...

  6. python 文件读写，打开 未完。。。

    导入库 os库   import os 获取当前目录 os.getcwd() 切换目录 os.chdir('路径') 打开写入文件 import osos.getcwd()os.chdir('E:\\ ...

  7. linux查看tomcat日志

    声明:以上内容均为转载,个人对这块知识搜罗之后放在一起,非原创,以后这块有问题还会继续添加. Tomcat 日志分为下面5类: catalina . 相当命令行输出日志 localhost . 相当于 ...

  8. Mongo 后台加索引踩坑

    背景,随着mongo数据量变大,查询效率变低,要对索引进行优化,所在公司对mongo依赖比较严重,而DBA并不对mongo的权限做控制,所以每个后端开发都有mongo的读写权限,通常每个人各自管理自己 ...

  9. 2017 清北济南考前刷题Day 7 morning

    期望得分:100+50+20=170 实际得分:10+50+20=80 1. 纸牌 题目描述 在桌面上放着n张纸牌,每张纸牌有两面,每面都写着一个非负整数.你的邪王真眼可以看到所有牌朝上的一面和朝下的 ...

  10. 《设计模式》-原则五：合成/聚合复用原则（CARP）

    这个也好理解 ,这个合成/聚合复用原则指的是在一个新的对象里面使用一些已有的对象,使其成为新对象的一部分.新对象通过委派达到复用已有功能的效果. 说到这里要讲提及到“Has-A” 和“Is-A”的区别 ...