使用CSS实现图片的倒影效果

CSS介绍：

CSS称为层叠样式单，它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。在传统的web网页设计里，使用CSS可以让单调的HTML网页更富有表现力。CSS与传统HTML描述数据方式比较有那些优势：例如表达效果丰富、文档体积比较小、便于信息检索、可读性好等等。注意：CSS是将文档格式和样式分离，便于管理和修改，使网页更加完善。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.reflect{width: 800px;height: 300px;border: 1px solid black;-webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(255,0,0,0),rgba(255,0,0,1));margin: auto;}.reflect img{width: 100%;height: 100%;}</style>
</head>
<body><div class="reflect"><img src="img/u=722430420,1974228945&fm=253&fmt=auto&app=138&f=JPEG.webp" alt=""></div>
</body>
</html>

CSS发展历程：

20 世纪 90 年代初 HTML 语言诞生，这时的 HTML 只包含很少的属性来控制网页的显示效果。伴随着 HTML 的成长，各式各样的样式语言也随之出现，不同的浏览器结合它们各自的样式语言来控制页面的显示效果。

经过不断的发展，HTML 中添加了越来越多的属性来满足页面设计者的需求，随着这些属性的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿，于是 CSS 便诞生了。

1994 年，哈坤·利提出了 CSS 的最初建议，并决定与正在设计 Argo 浏览器的伯特·波斯（Bert Bos）合作，共同开发 CSS。1994 年底，哈坤·利在芝加哥的一次会议上第一次正式提出了 CSS 的建议，之后又在 1995 年的 WWW 网络会议上再次提出了 CSS，在会议上伯特·波斯展示了支持 CSS 的 Argo 浏览器，哈坤·利也展示了支持 CSS 的 Arena 浏览器。

同年，W3C 组织（World WideWeb Consortium）成立，该组织对 CSS 的发展很感兴趣，为此还专门组织了一次讨论会。最终 CSS 的全部开发成员都加入了 W3C 组织，并负责 CSS 标准的制定，至此 CSS 的发展走上正轨。

W3C，中文名为“万维网联盟”，也称为“W3C理事会”，由万维网的发明者 蒂姆·伯纳斯·李 于 1994 年 10 月在麻省理工学院计算机科学实验室成立，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。

CSS所具特点：

CSS 是 Web 领域的一个突破，它为 HTML 提供了一种描述元素样式的方式，使用 CSS 和 HTML 可以制作出外形优美的网页。总体来说 CSS 具有以下特点：

1) 丰富的样式定义

CSS 提供了丰富的外观属性，可以在网页中实现各式各样的效果，例如：

为任何元素设置不同的边框，以及边框与元素之间的内外间距；
改变文字的大小、颜色、字体，为文字添加修饰（例如下划线、删除线）；
为网页设置背景颜色或者背景图片等等。

2) 易于使用和修改

CSS 的样式信息不仅可以定义在 HTML 元素的 style 属性中，也可以定义在 HTML 文档 <head> 标签内的 <style> 标签中，还可以定义在专门的 .css 格式的文件中，之后再将其引用到 HTML 文档。推荐使用最后一种定义方式（定义单独的 .css 格式文件），这样可以将 CSS 样式统一存放，方便后期维护。

3) 多页面应用

前面说了可以将 CSS 样式单独存放在一个 .css 格式的文件中，这个文件不属于任何页面，我们可以在不同的页面引用这个 .css 格式的文件，这样就可以统一不同页面的风格。

4) 层叠

层叠就是指可以对同一个 HTML 元素多次定义 CSS 样式，后面定义的样式会覆盖前面定义的样式。例如整个站点引用了同样的 CSS 样式文件，但想要调整其中某个页面的某些元素，这时就可以针对想要调整的元素单独定义一份样式文件并引用到页面中。这样后来单独定义的样式就会覆盖前面的样式，在浏览器同样只会看到最后设置的效果。

5) 页面压缩

一个网页其中通常包含大量的 HTML 元素，为了实现某些效果我们往往还需要为这些元素定义样式文件，如果将它们放到一起就会使得我们的 HTML 文档过于臃肿。而将 CSS 样式定义在单独的样式文件中，把 CSS 样式与 HTML 文档分开的话就可以大大减小 HTML 文档的体积，这样浏览器加载 HTML 文档所用的时间也会减少。

另外，CSS 样式可以重复使用，不同的元素可以使用相同的 CSS 样式，这样可以避免定义重复的样式，CSS 样式文件的体积也会相应的减小，从而进一步缩短页面加载的时间。

使用CSS实现图片的倒影效果相关推荐

纯css实现图片带倒影效果的hover翻转特效
效果图: <template><div class="glassReflection"><div class="scene"> ...
html css 背景图片
html css 背景图片文章目录 html css 背景图片视频代码视频 https://www.bilibili.com/video/BV1MJ411M7qi?from=search&am ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
利用wget 抓取网站网页包括css背景图片
利用wget 抓取网站网页包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
转: 用css把图片转为灰色图
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
js和css和img,Node.js压缩web项目中的js,css和图片
安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是 ...
css实现图片自适应容器的几种方式
css实现图片自适应容器经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式我们马上就能想到,把width.height 设置为100%啊.来看一哈效果. <div cla ...
django中html中图片路径怎么写,django css样式,图片路径问题解决方案
在用Django 做项目时,如果在本地调试的情况下,我们会开启 settings.py 中的 DEBUG = True 同时我们还会做如下操作: 1. 设置 STATIC_ROOT = os.path ...
css图片过大,CSS解决图片过大撑破DIV的方法
一.防止图片撑破DIV方法一原始处理方法是将要展示的图片进行处理.比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切.等比例缩 ...

使用CSS实现图片的倒影效果

使用CSS实现图片的倒影效果相关推荐

最新文章

热门文章