在Web开发中。通过CSS代码也能够实现一些简单的图片，当然，假设你有耐心，也能够实现较为复杂的图片噢。

那么请问为什么有图片不去用而须要用CSS来实现呢？一是由于性能的原因，图片带给server和client的压力比几行CSS代码要大得多。二是由于没有必要。有些简单的效果利用CSS就能够直接完毕了，为什么还须要麻烦地引入图片呢？

比方大名鼎鼎的bootstrap中选择列表的下三角就是通过css实现的。

效果例如以下：

事实上现代码例如以下：

<ul>

	<li class="dropdown">dropdown</li>

</ul>

.dropdown:after {

	position:absolute;

	width:0;

	height:0;

	margin-top:8px;

	margin-left:5px;

	display:inline-block;

	border-left:6px solid transparent;

	border-right:6px solid transparent;

	border-top:6px solid #000000;

	content:'';

}

能够看到，三角形实现的原理事实上就是利用了border-left,border-right以及border-top。

通过将左右边框设为透明状，来显示三角形的边界区域。

代码位置：http://runjs.cn/code/o3miehqr

以下再来看看一个有趣的运用，非常多站点中，当图片未载入出来时，都有一个替代的图片来顶替，例如以下：

事实上这个图片是通过CSS代码来实现的。代码例如以下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			#rectangle {

				position: relative;

				background:#FFFFFF;

				border:10px solid #999999;

				width:200px;

				height:120px;

			}

			#circle {

				position: absolute;

				background-color: #999999;

				width:40px;

				height: 40px;

				border-radius: 50%;

				margin-left:140px;

				margin-top:20px;

			}

			#triangle1 {

				position:absolute;

				width:0;

				height:0;

				border-left:40px solid transparent;

				border-right:70px solid transparent;

				border-bottom:80px solid #999;

				margin-top:30px;

				margin-left:10px;

			}

			#triangle2 {

				position:absolute;

				width:0;

				height:0;

				border-left: 30px solid transparent;

				border-right: 60px solid transparent;

				border-bottom:60px solid #999;

				margin-top:50px;

				margin-left: 80px;

			}

		</style>

	</head>

	<body>

		<div id="rectangle">

			<span id="circle"></span>

			<span id="triangle1"></span>

			<span id="triangle2"></span>

		</div>

	</body>

</html>

代码位置：http://runjs.cn/code/zj0bbjpw

其原理就是构建三角形和圆形。利用了border和border-radius。

所以说CSS实现图片在应用中还是挺广泛的。

纯CSS实现图片的更多相关文章

  1. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  2. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  3. css图片居中，通过纯css实现图片居中的多种实现方法

    在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...

  4. 纯CSS 多图片轮播

    今天做东西的时候,遇到一个问题关于图片轮播的问题,以前也接触过(百度 人家的demo改改..),再次遇到这个问题的时候,根据以前的印象找到了demo正信心满满的准备改一下嵌进去,发现 jquery.m ...

  5. 纯css实现图片的灯光照射效果，高逼格图片展示

    先不说技术,看实现的效果, 与原图(左图)相比,‘灯光’ 照射(右图)下的小姐姐是不是更有魅力了!! 那么下面就说说大家关心的技术实现过程. 其实这是我在学习css属性 mix-blend-mode ...

  6. 纯css用图片代替checkbox和radio,无js实现方法

    html <ul id="is_offical_post_links"> <li> <label> <input type="c ...

  7. 纯CSS实现图片抖动

    实现方法: 1.将上文提到的以下JS内容删除: $(".imagelogo").mouseover(function() { obj = $(this); i = 5; timer ...

  8. 纯css实现图片或者页面变灰色

    前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...

  9. 通过纯css实现图片居中的多种实现方式

    html结构: <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd ...

随机推荐

  1. 基于python3.x，使用Tornado中的torndb模块操作数据库

    目前Tornado中的torndb模块是不支持python3.x,所以需要修改部分torndb源码即可正常使用 1.开发环境介绍 操作系统:win8(64位),python版本:python3.6(3 ...

  2. app.config 配置多项 配置集合 自定义配置

    C#程序的配置文件,使用的最多的是appSettings 下的<add key="Interval" value="30"/>,这种配置单项的很方便 ...

  3. C++使用htslib库读入和写出bam文件

      有时候我们需要使用C++处理bam文件,比如取出read1或者read2等符合特定条件的序列,根据cigar值对序列指定位置的碱基进行统计或者对序列进行处理并输出等,这时我们可以使用htslib库 ...

  4. C# 中操作API

    作为初学者来说,在C#中使用API确是一件令人头疼的问题.在使用API之间你必须知道如何在C#中使用结构.类型转换.安全/不安全代码,可控/不可控代码等许多知识. 一切从简单开始,复杂的大家一时不能接 ...

  5. [转载] Java学习之Hessian通信基础

    转载自http://blog.sina.com.cn/s/blog_7f73e06d0100xn9j.html 一.首先先说Hessian是什么?    Hessian:hessian是一个轻量级的r ...

  6. CentOS下安装Tomcat 8

    CentOS下安装Tomcat 8 安装Tomcat8 去http://tomcat.apache.org/download-80.cgi下载Tomcat8的安装文件apache-tomcat-8.0 ...

  7. java oop详解

    近日来重温了一下java oop的知识.加深了对面向对象的理解.尤其时继承方面.故写一篇博客.记录一下自己的想法和心得 1.面向对象主要分为三大点(封装,继承,多态) 封装的思想促进了类的形成.相比于 ...

  8. Python机器学习库和深度学习库总结

    我们在Github上的贡献者和提交者之中检查了用Python语言进行机器学习的开源项目,并挑选出最受欢迎和最活跃的项目. 1. Scikit-learn(重点推荐) www.github.com/sc ...

  9. 【转】Java中用单例模式有什么好处

    Java Singleton模式主要作用是保证在Java应用程序中,一个类Class只有一个实例存在. 使用Singleton的好处还在于可以节省内存,因为它限制了实例的个数,有利于Java垃圾回收( ...

  10. MSSQL-并发控制-2-Isolation

              如果转载,请注明博文来源: www.cnblogs.com/xinysu/   ,版权归 博客园 苏家小萝卜 所有.望各位支持!   MySQL通过MVCC和锁来实现并发控制,在4 ...