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. 【树论 1】 prim算法的学习和使用

    进阶版神犇可以看看本题解的姊妹篇 Kruskal算法的学习和使用 下面的内容是prim算法 但是最小生成树是什么呢? 标准定义如下:在边子集所构成的树中,不但包括了连通图里的所有顶点,且其所有边的权值 ...

  2. 【bzoj3209】 花神的数论题

    http://www.lydsy.com/JudgeOnline/problem.php?id=3209 (题目链接) 题意 ${sum(i)}$表示${i}$的二进制表示中${1}$的个数.求${\ ...

  3. 解题：USACO10MAR Great Cow Gather

    题面 可以水水换根的,不过我是另一种做法:(按点权)找重心,事实上这是重心的一个性质 考虑换根的这个过程,当我们把点放在重心时,我们移动这个点有两种情况: 1.移动到最大的那个子树里 可以发现这个最大 ...

  4. tar 命令显示进度条

    实现该功能需要安装 pv,然后把需要处理的数据通过管道传给 pv,最后再进行操作. 传给 pv 的目的是为了知道已经处理的数据量大小,同时需要通过 -s 指定总共需要处理的数据量大小. pv 的安装一 ...

  5. 详细BP神经网络预测算法及实现过程实例

    1.具体应用实例.根据表2,预测序号15的跳高成绩. 表2 国内男子跳高运动员各项素质指标 序号 跳高成绩() 30行进跑(s) 立定三级跳远() 助跑摸高() 助跑4—6步跳高() 负重深蹲杠铃() ...

  6. Qt error ------ no matching function for call to QObject::connect(QSpinBox*&, <unresolved overloaded function type>, QSlider*&, void (QAbstractSlider::*)(int))

    connect(ui->spinBox_luminosity,&QSpinBox::valueChanged, ui->horizontalSlider_luminosity, & ...

  7. Java入门：基础算法之从字符串中找到重复的字符

    本程序演示从一个字符串中找出重复的字符,并显示重复字符的个数. import java.util.HashMap; import java.util.Map; import java.util.Set ...

  8. pyqt5的代码

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  9. numpy/arrayobject.h”: No such file or directory

    import numpyimport pyximportpyximport.install(setup_args={"script_args":["--compiler= ...

  10. 科学计算三维可视化---TVTK管线与数据加载（用IVTK根据观察管线）

    一:用IVTK根据观察管线 (一)引入该工具 from tvtk.tools import ivtk 可能需要安装pygments pip3 install pygments (二)使用ivtk显示立 ...