搜索栏图标：

<!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. 【Chrome】Chrome浏览器怎么查看版本信息

    第一步,打开Chrome浏览器 第二步,弹出浏览器主界面 第三步,点击右上按钮(三横杠) 第四步,下拉中选择“关于” 第五步,弹出窗口,可以看到版本信息 第二种方法: 第六步,也可以通过地址栏里输入命 ...

  2. poj——2891 Strange Way to Express Integers

    Strange Way to Express Integers Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 16839 ...

  3. Ubuntu中PPA源是什么

    以下内容转自https://imcn.me/ppa: PPA是Personal Package Archives首字母简写.翻译为中文意思是:个人软件包文档 只有Ubuntu用户可以用,而所有的PPA ...

  4. mybatis指定jdbctype

    MyBatis 插入空值时,需要指定JdbcType mybatis insert空值报空值异常,但是在pl/sql不会提示错误,主要原因是mybatis无法进行转换 所以在MyBatis映射文件中要 ...

  5. php 生成订单号

    最近在练手一个订单提交的小项目,需要用到生成订单号,网上找了下,觉得这个最好. function build_order_no(){ return date('Ymd').substr(implode ...

  6. Solid Edge如何估算零件的质量，重心等物理性质

    点击检查-物理性质,勾选"显示符号"即可显示质心和形心(先点击更新,更新每个零件的密度).   最后得到质心和形心    

  7. Windows 文件夹修改为exe的原理和解决办法

    有关文件夹后缀改为exe的病毒 该病毒之前出现过,不过没多长时间便消失了,最新的这个应该是变种,下面解决一下该病毒在移动存储设备中的问题: 该病毒并不具备能够将文件夹改为文件的能力,只是将原有文件夹全 ...

  8. [C++]_[获取Utf8字符串的字符个数和子字符串]

    场景: 1.有时候须要统计utf8字符串的个数,单纯统计字节个数是不行的. 2.有时候也须要获取从某个位置開始的n个连续字符用于显示或计算. static int GetUtf8LetterNumbe ...

  9. ASPNETCOREAPI 跨域处理 SQL 语句拼接 多条件分页查询 ASPNET CORE 核心 通过依赖注入（注入服务）

    ASPNETCOREAPI 跨域处理 AspNetCoreApi 跨域处理 如果咱们有处理过MV5 跨域问题这个问题也不大. (1)为什么会出现跨域问题:  浏览器安全限制了前端脚本跨站点的访问资源, ...

  10. LeetCode 443. String Compression (压缩字符串)

    题目标签:String 这一题需要3个pointers: anchor:标记下一个需要存入的char read:找到下一个不同的char write:标记需要存入的位置 让 read指针 去找到下一个 ...