在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. HTML学习笔记 div布局及table布局案例 第三节 （原创）参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. php图片上传服务器

    原理是把图片上传到服务器的某个目录,然后在把他的名字存入数据库,或者不需要数据库这部分也行.读取的时候直接读取名字. HTML提交表格 <form method="post" ...

  3. 微服务下的契约测试(CDC)解读

    1. 前言 有近两周没有在公众号中发表文章了,看过我之前公众号的读者都知道,公众号中近期在连载<RobotFramework接口自动化系列课程>,原本计划每周更新一篇,最近由于博主在带一个 ...

  4. 在LINQ查询中LINQ之Group By的用法

    LINQ定义了大约40个查询操作符,如select.from.in.where.group 以及order by,借助于LINQ技术,我们可以使用一种类似SQL的语法来查询任何形式的数据.Linq有很 ...

  5. 转-Gitorious搭建步骤

    先标记一下,后续手动验证 http://blog.csdn.net/king_sundi/article/details/7457475 安装Gitorious Git是一个分布式的版本控制系统,用于 ...

  6. 启用 Brotli 压缩算法，对比 Gzip 压缩 CDN 流量再减少 20%

    Google 认为互联网用户的时间是宝贵的,他们的时间不应该消耗在漫长的网页加载中,因此在 2015 年 9 月 Google 推出了无损压缩算法 Brotli.Brotli 通过变种的 LZ77 算 ...

  7. spring boot系列02--Thymeleaf+Bootstrap构建页面

    上一篇说了一下怎么构建spring boot 项目 接下来我们开始讲实际应用中需要用到的 先从页面说起 页面侧打算用Thymeleaf+Bootstrap来做 先共通模板页 <!DOCTYPE ...

  8. 分享一篇vue项目规范

    最近 Vue 用的比较多,而且因为公司里有实习生,当几个人写一个项目的时候,会出现很多问题,最麻烦的就是规范不统一,之前我有一篇文章是说, vue 是比较有规范的一种框架了,但是也会出现很多问题,所以 ...

  9. IDisposeable,Close

    一.资源分类 资源分为托管资源和非托管资源. 非托管资源:所有的windows内核对象(句柄)都是非托管资源,如stream,数据库连接,GDI+和COM对象等,这些资源不受CLR管理. 托管资源:由 ...

  10. python之列表（list）的使用方法介绍

    python之列表(list)介绍 在python的使用过程中,我们经常会用到列表,然而经常会遇到疑惑,下面我将详细介绍下列表使用方法. 一.列表 列表经常用到的功能使增.删.改和查功能. 1. 增 ...