在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. JAVA 的关键字 、

    关键字: 被JAVA语言赋予特定含义的单词, 特点: 组成关键字的单词的字母全部小写 注意: A:goto 和 const 是保留字 B: 类似于Notepad++ 这样的高级记事本,针对关键字有特殊 ...

  2. main之前初始化流程

    main之前初始化流程 本文分别介绍Keil调用的ARMCC以及ARM-NONE-EABI-GCC两个编译器在main之前的操作: Keil MDK启动文件 总结一下MDK的启动流程: 1.系统初始化 ...

  3. sql2012笔记

    收缩数据库日志文件1.数据库右键-->Options-->Revovery model =Full 改成 Simple2.数据库右键-->Tasks-->Shrink--> ...

  4. C# 链接MySql数据库

    C# 链接MySql数据库只得注意的几点: 1.C#链接MySql数据库要在网上下载一个mysql-connector-net-6.0.4-noinstall.rar  这里面放的都是一堆dll .将 ...

  5. 前端面试题（6）图片格式jpg，gif，png-8，png-24的区别，及其各自的使用场景

    Gif格式特点: 透明性,Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha透明). 动画,Gif这种格式支持动画. 无损耗性,Gif是一种无损耗的图像格式, ...

  6. 【转】Entity Framework 5.0系列之自动生成Code First代码

    在前面的文章中我们提到Entity Framework的“Code First”模式也同样可以基于现有数据库进行开发.今天就让我们一起看一下使用Entity Framework Power Tools ...

  7. pattern

    A compiled representation of a regular expression. A regular expression, specified as a string, must ...

  8. 安装freemarker模板的ftl插件

    安装freemarker模板的ftl插件 同意协议 等待运行完成 重新启动eclipse 查看是否生效

  9. 从ThoughtWorks 2017技术雷达看微软技术

    ThoughtWorks在每年都会出品两期技术雷达,这是一份关于技术趋势的报告,它比起一些我们能在市面上见到的其他各种技术行情和预测报告,更加具体,更具可操作性,因为它不仅涉及到新技术大趋势,比如云平 ...

  10. Less的内置函数

    杂项函数 color 解析颜色,将代表颜色的字符串转换为颜色值. 参数: string: 代表颜色值的字符串. 返回值: color 案例: color("#aaa"); 输出: ...