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. 【省选水题集Day1】一起来AK水题吧！ 题目（更新到B）

    题解:http://www.cnblogs.com/ljc20020730/p/6937954.html 水题A: [AHOI2001]质数和分解 题目网址: https://www.luogu.or ...

  2. nginx之编译安装

    一.认识nginx 常用的web服务有Apache.IIS(windows系统).Lighttpd.Tomcat.Nginx等.Nginx是一个开源的,支持高性能.高并发的www服务和代理服务软件.它 ...

  3. 【uoj125】 NOI2013—书法家

    http://uoj.ac/problem/125 (题目链接) 题意 在网格上写“NOI”,每个格子上有一些权值,要求覆盖的权值最大.书写有一些规则. Solution 将“NOI”分成11个部分, ...

  4. Moonraker:1靶机入侵

      0x01 前言 攻击Moonraker系统并且找出存在最大的威胁漏洞,通过最大威胁漏洞攻击目标靶机系统并进行提权获取系统中root目录下的flag信息. Moonraker: 1镜像下载地址: h ...

  5. POJ.3321 Apple Tree ( DFS序 线段树 单点更新 区间求和)

    POJ.3321 Apple Tree ( DFS序 线段树 单点更新 区间求和) 题意分析 卡卡屋前有一株苹果树,每年秋天,树上长了许多苹果.卡卡很喜欢苹果.树上有N个节点,卡卡给他们编号1到N,根 ...

  6. Java考试题之九

    QUESTION 177 Given: 1.     class TestException extends Exception { } 2.     class A { 3.     public ...

  7. @Html.DropDownListFor默认选中项

    http://q.cnblogs.com/q/73902/ 项目使用mvc4,给dropDownList指定默认值未选中 页面代码是: 1.未有默认选中值 Html.DropDownListFor(m ...

  8. 【Asp.net入门5-01】SportsStore:一个真实的应用程序

  9. python中的常用模块

    python中常用的模块 time: 1)time.localtime([secs]):将一个时间戳转换为当前时区的struct_time.secs参数未提供,则以当前时间为准. 2)time.gmt ...

  10. JS获取当前时间并格式化"yyyy-MM-dd HH:mm:ss"

    先来看下JS中的日期操作: var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年 ...