搜索栏图标：

<!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. BZOJ2521 最小生成树 最小割

    5.26 T2:最小生成树 Description Secsa最近对最小生成树问题特别感兴趣.他已经知道如果要去求出一个n个点.m条边的无向图的最小生成树有一个Krustal算法和另一个Prim的算法 ...

  2. POJ2774：Long Long Message

    问两个串的最长公共子串,n<=100000. SAM可以直接搞当然SA哈希都可以..类似于KMP的做法,如果沿parent边走要顺势修改匹配位置. #include<stdio.h> ...

  3. RabbitMQ消息队列阻塞导致服务器宕机

    最近工作中存储服务器由于压力太大无法及时消费消息.这个过程中,导致RabbitMQ意外挂掉,无法访问.下面是部分问题分析过程. 麒麟系统服务器分析 1.服务器异常信息: [root@localhost ...

  4. Mysql优化和执行计划

    SQL优化准则 禁用select * 使用select count(*) 统计行数 尽量少运算 尽量避免全表扫描,如果可以,在过滤列建立索引 尽量避免在where子句对字段进行null判断 尽量避免在 ...

  5. Ext.data.JsonStore的使用

    最近在维护一个Ext.js写的贷前服务系统,Ext.data.JsonStore相当于前台页面的一个数据仓库,负责保存后台传过来的Json数据,具体用法如下: var store12=new Ext. ...

  6. JavaScript实现页面无刷新让时间走动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. [Vue @Component] Simplify Vue Components with vue-class-component

    While traditional Vue components require a data function which returns an object and a method object ...

  8. ExtJs--09--javascript对象的方法的3种写法 prototype通过原型设置方法效率最好

    /** * javascript对象的方法的3种写法 推荐第三种 运行效率最好 */ function P(name , age){ this.name = name ; this.age = age ...

  9. C++对象模型——函数的效能(第四章)

    4.3 函数的效能 在以下的这组測试中,在不同的编译器上计算两个3D点,当中用到一个nonmember friend function,一个member function,以及一个 virtual m ...

  10. nginx-tomcat负载均衡redis-session共享，静态资源分离

    nginx-tomcat负载均衡redis-session共享.静态资源分离 基本环境: redis-2.8 apache-tomcat-6.0.41 nginx1.6.2 1.redis配置 1,配 ...