搜索栏图标：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        input {

            width:270px;

            height:28px;

            background: url('serch.jpg') no-repeat right center;

        }

    </style>

</head>

<body>

    <input type="text" name="name" value="" placeholder="请输入..." />

</body>

</html>

效果：

视频列表图标：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        li{

            list-style:none;

            text-indent:2em;

            background:url('li.gif') no-repeat left center;

        }

    </style>

</head>

<body>

    <ul>

        <li><a href="#">哈哈哈哈哈哈哈</a></li>

        <li><a href="#">哈哈哈哈哈哈哈</a></li>

        <li><a href="#">哈哈哈哈哈哈哈</a></li>

        <li><a href="#">哈哈哈哈哈哈哈</a></li>

        <li><a href="#">哈哈哈哈哈哈哈</a></li>

    </ul>

</body>

</html>

效果：

购物车图标：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        a{

            display:inline-block;

            width:67px;

            height:32px;

            background:url('110.png');

        }

            a:hover {

                background: url('110.png') bottom;

            }

    </style>

</head>

<body>

    <a href="#"></a>

</body>

</html>

素材：

效果：

在点击购物车图标后背景图片会立马切换到登陆：

CSS——background综合运用的更多相关文章

  1. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  2. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  3. CSS background 属性 总结

    CSS background 属性总结

  4. HTML CSS——background的认识（一）

    今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color- ...

  5. css background之设置图片为背景技巧

    css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...

  6. CSS background 之设置图片为背景技巧

    首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...

  7. CSS background 属性详解

    CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...

  8. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

  9. css background之设置图片为背景技巧

    原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那 ...

随机推荐

  1. JAVA虚拟机运行时内存划分--运行时数据区域

    Java虚拟机在执行java程序时会把内存划分为以下几个不同的数据区域: java虚拟机内存划分(运行时)1.线程私有的: 程序计数器(Program Counter Register):可以看作当前 ...

  2. 浅谈WEB标准

    WEB标准,WEB标准.可亲可爱的WEB,什么是你定下的标准呢.这几天又又一次回归最基础的知识了,OK.言归正传,什么是WEB标准.为什么要用WEB标准? 比方说,如今的浏览器版本号多吧,chrome ...

  3. 开源软件Review Board

    开源软件, Review Board 代码审查的. https://www.reviewboard.org/

  4. PAT Broken Keyboard (20)

    题目描写叙述 On a broken keyboard, some of the keys are worn out. So when you type some sentences, the cha ...

  5. Android首次启动时间长优化之预编译提取Odex

        提示!应用程序的安装有两种情况,第一:首次启动系统时安装.第二:系统启动完毕后安装. 本篇博文基于第一种安装场景.在系统首次启动的场景中,系统会对/system/app./system/pri ...

  6. android TextView不用ScrollViewe也可以滚动的方法

    TextView textview = (TextView) findViewById(R.id.text); /** * * 只有调用了该方法,TextView才能不依赖于ScrollView而实现 ...

  7. linux C函数之strdup函数分析【转】

    本文转载自:http://blog.csdn.net/tigerjibo/article/details/12784823 linux C函数之strdup函数分析 一.函数分析 1.函数原型: #i ...

  8. remove namespace from xml config file

    从xml配置文件中移除命令空间 https://stackoverflow.com/questions/987135/how-to-remove-all-namespaces-from-xml-wit ...

  9. html5音频视频专题

    html5音频视频专题 总结 1. 操作的就是video和audio两个对象,这两个对象有他们的属性和方法,通过对象的id就可以操作他们 <audio src="../video/琴箫 ...

  10. 【POJ 2689】 Prime Distance

    [题目链接] http://poj.org/problem?id=2689 [算法] 我们知道,一个在区间[l,r]中的合数的最小质因子必然不超过sqrt(r) 那么,先暴力筛出1-50000中的质数 ...