搜索栏图标：

<!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. codevs1127 接水问题

    题目描述 Description 学校里有一个水房,水房里一共装有m 个龙头可供同学们打开水,每个龙头每秒钟的供水量相等,均为1. 现在有n 名同学准备接水,他们的初始接水顺序已经确定.将这些同学按接 ...

  2. JNA调用库文件

    最近项目中要集成厂商的卡口摄像头,需要通过jna调用库函数接收卡口相机抓拍的过车数据.本文记录了Java调用C语言动态库(jna)的调用方式.回调函数.结构体等. JNA全称Java Native A ...

  3. java NPE就是空指针异常，null pointer exception

    java NPE就是空指针异常,null pointer exception

  4. 你不知道的JavaScript--Item34 大白话解说Promise

    去年6月份. ES2015正式公布(也就是ES6.ES6是它的乳名),当中Promise被列为正式规范.作为ES6中最重要的特性之中的一个,我们有必要掌握并理解透彻.本文将由浅到深,解说Promise ...

  5. Python3基础（四） 条件与循环控制

    Python的流程控制语句包括:if条件语句.while循环语句.for循环语句.range函数以及break.continue.pass控制语句.这些语句在Python中的语义和在其他语言中基本是一 ...

  6. (WIP) DPDK理论学习(by quqi99)

    作者:张华  发表于:2016-04-22版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 组成模 ...

  7. 一个APP爆炸的时代，假设没有wifi

    我们每天都离不开的微信,又传来了一个新消息.你造?微信公众平台新增了设备功能.眼下可支持可穿戴设备,将来呢,前景不可限量!能够想象,"后果"是我们越来越离不开微信,依附于它.这样的 ...

  8. Excel 常用快捷键键 快捷方式

    移动整行的位置 Shift + Alt + 鼠标拖拽 不加Shit + Alt 移动后 留白 注意:需要移动鼠标到行的最上面,变成十字箭头

  9. ios14--购物车优化2

    // // ViewController.m // 03-综合练习 // // Created by xiaomage on 15/12/28. // Copyright © 2015年 小码哥. A ...

  10. BitmapFactory.decodeStream()获取bitmap返回null

    正常的图片缩放代码如: ByteArrayOutputStream baos = new ByteArrayOutputStream(); arg1.compress(Bitmap.CompressF ...