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. Mininet 系列实验（二）

    实验内容 分别通过命令行创建.Python脚本编写以及交互式界面创建来熟悉Mininet的基本功能. 参考 Mininet命令延伸实验扩展 实验环境 虚拟机:Oracle VM VirtualBox ...

  2. 【Learning】辛普森积分

    辛普森积分 这种积分法很暴力:只要求你实现出函数求值\(f(x)\). 使用辛普森积分,我们可以求出函数一段区间\([l,r]\)的近似积分.记\(mid=\frac{l+r}2\),有: \[ \i ...

  3. 【poj3016】 K-Monotonic

    http://poj.org/problem?id=3016 (题目链接) 题意 给出一个数列,将一个数${a_i}$更改为${b_i}$的代价为${|a_i-b_i|}$.求将数列改为不递减的最小代 ...

  4. Android资源混淆 + 混淆忽略 .so库

    安装包立减1M--微信Android资源混淆打包工具http://mp.weixin.qq.com/s?__biz=MzAwNDY1ODY2OQ==&mid=208135658&idx ...

  5. 解题：NOI 1999 生日蛋糕

    题面 裸的搜索题,就说剪枝(注:nw->noww->当前,res->rest->剩余): 1.想达到$Nπ$的体积,那么半径一开始最多也就$sqrt(n)$了,再大就超了... ...

  6. Python 不定参数函数

    1. 元组形式 def test1(*args): print('################test1################') print(type(args)) print(arg ...

  7. python的str()字符串类型的方法详解

    字符串一旦创建,不可修改,一旦修改或者拼接,都会造成重新生成字符串,因为内存存数据是一个挨着一个存的,如果增加一个字符串的话,之前的老位置只有一个地方,不够,这是原理性的东西,在其他语言里面也一样 7 ...

  8. FastDFS部署

    环境: CentOS 7 FastDFS 5.05 Nginx 1.10 fastdfs-nginx-module_v1.16 libfastcommon-1.0.7 libevent-2.0.21- ...

  9. 并发库应用之三 & 线程池与定时器应用

    在TCP服务器编程模型的原理,每一个客户端连接用一个单独的线程为之服务,当与客户端的会话结束时,线程也就结束了,即每来一个客户端连接,服务器端就要创建一个新线程.如果访问服务器的客户端很多,那么服务器 ...

  10. Linux下的Jenkins+Tomcat+Maven+Git+Shell环境的搭建使用（jenkins自动化部署）

    jenkins自动化部署 目标:jenkins上点构建(也可以自动检查代码变化自动构建)>>>项目部署完成. 一.安装jenkins 1.下载jenkins 这里我选择的是war包安 ...