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. 【AGC010F】Tree Game

    Description 有一棵\(n\)个节点的树(\(n \le 3000\)),第\(i\)条边连接\(a_i,b_i\),每个节点\(i\)上有\(A_i\)个石子,高桥君和青木君将在树上玩游戏 ...

  2. BZOJ5058 期望逆序对 【矩乘 + 组合数学 + 树状数组】

    题目链接 BZOJ5058 题解 可以发现任意两个位置\(A,B\)最终位置关系的概率是相等的 如果数列是这样: CCCCACCCCBCCCC 那么最终有\(7\)种位置关系 \((A,B)\) \( ...

  3. git "refusing to merge unrelated histories" 解决方法

    出现这个错误是因为本地的 git 历史和远程仓库的 git 历史不一样,如果我们想要合并两个不同的 git 历史(我们必须要清楚我们在做什么),就可以使用这个选项来进行强制合并不同的 git 历史,如 ...

  4. Levenshtein Distance莱文斯坦距离算法来计算字符串的相似度

    Levenshtein Distance莱文斯坦距离定义: 数学上,两个字符串a.b之间的莱文斯坦距离表示为levab(|a|, |b|). levab(i, j) = max(i, j)  如果mi ...

  5. python map对象

    工作中遇到需要将List对象中的元素(list类型)转化为集合(set)类型,转化完成之后需要需要访问其中的元素. 第一步,使用map方法进行转换 data = [[1, 3, 4], [2, 3, ...

  6. python【数据类型：列表与元组】

    python列表: 定义一个列表:cities=['北京','上海','广州','深圳'] 注意:列表的下标0表示第一个元素,下标-1表示最后一个元素 列表增加元素 在列表末尾添加一个元素:citie ...

  7. Django中@login_required用法简介

    我们在网站开发过程中,经常会遇到这样的需求: 用户登陆系统才可以访问某些页面 如果用户没有登陆而直接访问就会跳转到登陆界面,而不能访问其他页面. 用户在跳转的登陆界面中完成登陆后,自动访问跳转到之前访 ...

  8. NATS_04：NATS协议详解

    NATS的协议是一个简单的.基于文本的发布/订阅风格的协议.客户端连接到 gnatsd(NATS服务器),并与 gnatsd 进行通信,通信基于普通的 TCP/IP 套接字,并定义了很小的操作集,换行 ...

  9. jquery 格式化数字字符串(小数位)

    用于页面上格式化数字字符串,此代码为工作时所需,留作笔记,比较常用. /** * author: xg君 * 描述: 格式化数字字符串,格式化小数位 * obj为需要格式的对象(例如:input标签) ...

  10. Hi35xx 通用GPIO 使用篇(板子3G电源控制脚说明)

    在一个嵌入式系统中使用最多的莫过于 通用输入输出 GPIO口.看到论坛中经常有朋友问海思为什么没有提供GPIO驱动.其实不然. 在海思SDK  xxx/osdrv/tools/board_tools/ ...