在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. Problem F: 多少个最大值？

    Description 输入若干个int类型的整数,求它们的最大值及其个数. Input 输入 若干个int类型的整数,至文件尾为止. Output 输出只有一行:There are # maximu ...

  2. MySQL数据库中文变问号

    原文参考:http://www.linuxidc.com/Linux/2017-05/144068.htm 系统是的Ubuntu  16,修改以下配置 1.sudo vi /etc/mysql/my. ...

  3. winform音频播放器(有声小说[凡人修仙传])

    该程序采用多线程的技术及DataGridView单元格扩展的技术 1.获取下载列表 private void GetDownList() { //System.Web.HttpUtility.UrlD ...

  4. Jquery中attr 和 prop的区别和联系

    昨天在选择借款方类型的时候总是会出现选择要点两次的现象,比如点击公司,第一次点击选择公司,没有选中,必须在次点击才可以选中,总感觉是有点延迟加载的意思,后来审查元素, 发现是redio元素,这样的话就 ...

  5. Builder模式的思考(Effective Java)

    <Effective Java>(第2版)中第二条中提到:遇到多个构造器参数时要考虑用构建器.在复习static关键字和内部类时回头看了一下,这才明白了为什么要用静态内部类来做处理,这里记 ...

  6. css3 ajax加载进度线

    最近想了想ajax加载时的进项,便着手写了这个,我想css3的支持度已经够了 <button onclick="start()">button</button&g ...

  7. Struts2-052验证脚本

    下面分享一下Struts2-052验证的python脚本 #-*- coding:utf-8 -*- import requests url_list_path ="/home/d0ll4r ...

  8. CSS实现模糊效果

    HTML代码如下: <body> <h1>body设置了模糊效果</h1> <div id="aa"></div> &l ...

  9. MySQL的安装(比较详细的安装步骤，包括客户端和服务端的安装，还有环境变量的配置以及使用Windows service启动MySQL)

    1.MySQL官网下载操作系统对应的MySQL安装包,解压之后就可以直接使用(免安装). MySQL安装包,一种是MySQL Enterprise Edition (commercial)企业版,还有 ...

  10. gulp 小坑一个

    学习gulp的时候,看到很多人写到 gulp.task('styles', function() { return gulp.src('src/styles/main.scss') .pipe(sas ...