在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. Ubuntu16 远程连接MySQL

    1.进入MySQL配置目录允许其他IP可以链接 vi /etc/mysql/mysql.conf.d/mysqld.cnf 吧下面这行注释掉 #bind-address = 127.0.0.1 2.远 ...

  2. Python 解LeetCode：654. Maximum Binary Tree

    用一个整型数组构建一个二叉树,根结点是数组中的最大值,左右子树分别是根结点的值在数组中左右两边的部分. 分析,这是二叉树中比较容易想到的问题了,直接使用递归就行了,代码如下: class Soluti ...

  3. WebGL学习(2) - 3D场景

    原文地址:WebGL学习(2) - 3D场景 经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的 ...

  4. [转载] 基于Dubbo框架构建分布式服务

    转载自http://shiyanjun.cn/archives/1075.html Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务 ...

  5. 一般处理程序获取Session方式

    今天写程序得时候遇到了一个问题:ajax在对ashx进行请求时如果按照 context.Request方式直接来获取值得话获取到得是空值,因此去网上搜了一下问题.现记录如下: ashx获取sessio ...

  6. [验证码识别技术]字符验证码杀手--CNN

    字符验证码杀手--CNN 1 abstract 目前随着深度学习,越来越蓬勃的发展,在图像识别和语音识别中也表现出了强大的生产力.对于普通的深度学习爱好者来说,一上来就去跑那边公开的大型数据库,比如I ...

  7. python开发 getpass获取操作系统登陆名

    需用使用python getpass模块 import getpass def get_system_user_name(): return getpass.getuser() def main(): ...

  8. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  9. Redis 快速入门

    Redis 快速入门 谈到Redis,大家应该都不陌生.它是用c语言开发的一个高性能键值数据库,主要用于缓存领域.本章通过Redis的安装,Redis的五大数据类型,Redis的Java客户端,Red ...

  10. lua元表

    __index元方法:按照之前的说法,如果A的元表是B,那么如果访问了一个A中不存在的成员,就会访问查找B中有没有这个成员.这个过程大体是这样,但却不完全是这样,实际上,即使将A的元表设置为B,而且B ...