`
qm4050
  • 浏览: 78350 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

CSS中的Img样式

 
阅读更多

一、基础代码
<IMG src="/picture/css20080501.jpg" width=224>

二、加边框
1、普通黑色边框(浏览器默认黑色)
<img src="/picture/css20080501.jpg" width=224 border=12>

2、简单的CSS装饰框
①<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 solid">
②<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 dashed">
③<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 dotted">
④<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 double">
⑤<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 groove">
⑥<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 ridge">
⑦<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 inset">
⑧<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 outset">

① ② ③ ④ ⑤ ⑥ ⑦ ⑧

三、加CSS滤镜
1、无参数滤镜
①黑白
<IMG style="FILTER: gray()" src="/picture/css20080501.jpg" width=224>
②底片
<IMG style="FILTER: xray()" src="/picture/css20080501.jpg" width=224>
③X光片
<IMG style="FILTER: invert()" src="/picture/css20080501.jpg" width=224>
④水平翻转
<IMG style="FILTER: fliph()" src="/picture/css20080501.jpg" width=224>
⑤垂直翻转
<IMG style="FILTER: flipv()" src="/picture/css20080501.jpg" width=224>

① ② ③ ④ ⑤

2、透明效果(opacity=100 透明度0—100)
①<IMG style="FILTER: Alpha(opacity=100,style=1)" src="/picture/css20080501.jpg" width=224>
②<IMG style="FILTER: Alpha(opacity=100,style=2)" src="/picture/css20080501.jpg" width=224>
③<IMG style="FILTER: Alpha(opacity=100,style=3)" src="/picture/css20080501.jpg" width=224>
④<IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="/picture/css20080501.jpg" width=224>

① ② ③ ④

3、其他特效
①浮雕
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Emboss()" src="/picture/css20080501.jpg" width=224>

②波纹
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Wave()" src="/picture/css20080501.jpg" width=224>
<IMG style="FILTER:Wave(Add=0,Freq=5,LightStrength=10,Phase=2,Strength=20)" src="/picture/css20080501.jpg" width=224>
(Add=是否打乱1或0;Freq=频率;LightStrength=光效强度;Phase=偏移量;Strength=振幅)

 

③模糊
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Blur()" src="/picture/css20080501.jpg" width=224>
<IMG style="FILTER:Blur(Add=1,Direction=45,Strength=150)" src="/picture/css20080501.jpg" width=224>
(Add=是否模糊1或0;Direction=方向;Strength=强度)

 

④发光
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow()" src="/picture/css20080501.jpg" width=224>
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow(Color=#987cb9,Strength=10)" src="/picture/css20080501.jpg" width=224>
(Color=颜色;Strength=强度)

 

⑤阴影
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Shadow()" src="/picture/css20080501.jpg" width=224>
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#987cb9,Direction=135,Strength=10)" src="/picture/css20080501.jpg" width=224>
(Color=颜色;Direction=方向;Strength=强度)

 

⑥投影
<IMG style="FILTER:progid:DXImageTransform.Microsoft.DropShadow()" src="/picture/css20080501.jpg" width=224>
<IMG style="FILTER:progid:DXImageTransform.Microsoft.DropShadow(Color=#987cb9,Offx=10,Offy=5,Positive=1)" src="/picture/css20080501.jpg" width=224>
(Color=颜色;offx=横向位移;offy=纵向位移;Positive=非透明或透明像素建立可见投影1或0)

 

⑦镂空
<IMG style="FILTER: Mask()" src="/picture/css20080501.jpg">

 
原图

对照图(在上面,看不到哦)

四、图片定位(align=right图片居右 hspace水平间距 vspace垂直间距)
<img src="/picture/css20080501.jpg" width=224 align=right hspace="5" vspace="5">

五、添加图片说明
<img src="/picture/css20080501.jpg" width=224 alt="原来你也在这里">


本篇文章来源于 Goldtimes.net 原文链接:http://www.goldtimes.net/teach/view/1081.htm

分享到:
评论

相关推荐

    css,js,img文件

    CSS负责定义网页的布局、颜色、字体等视觉样式,JavaScript则用于实现动态交互和功能,而img文件则包含了网页中展示的图片。接下来,我们将深入探讨这三个关键元素在网站开发中的作用、应用以及相互关系。 首先,...

    简单登录注册界面html模板 css js img fonts 层叠式样表文档.zip

    2. CSS(层叠样式表):CSS用于控制网页的外观和布局,包括颜色、字体、尺寸、布局等。在登录注册界面,CSS可以帮助我们实现诸如背景色、边框、间距、对齐方式、响应式设计(适应不同设备屏幕)等功能。例如,使用`....

    图文混排CSS img font.rar

    在这个"图文混排CSS img font.rar"压缩包中,包含了关于使用CSS(层叠样式表)来实现图文混排的相关资源,包括图片、文字、CSS样式和字体的应用。下面我们将详细探讨这些知识点。 首先,CSS(Cascading Style ...

    CSS3默认样式

    在网页设计与开发过程中,CSS(层叠样式表)扮演着至关重要的角色。它不仅能够帮助开发者美化页面布局,还能实现各种复杂的视觉效果。CSS3作为CSS的最新版本之一,引入了许多新特性来增强用户体验,简化开发流程。...

    小米官网界面html,css,img,js

    【小米官网界面html,css,img,js】是一个与前端网页开发相关的资源包,包含了构建小米官网界面的关键元素:HTML源代码、CSS样式表、图片资源以及JavaScript脚本。这些文件共同构成了网页的结构、样式和交互功能。接...

    20种炫酷CSS3按钮样式和鼠标滑过特效

    4. **结构清晰**:压缩包内的文件结构清晰,包括了HTML文件(index.html、readme.html)用于展示和说明,CSS文件夹包含了所有按钮样式的样式表,fonts文件夹存放了可能用到的字体文件,img文件夹则存储了按钮可能...

    CSS样式参考.rar

    2. **变量和预处理器**:CSS变量(`var(--name)`)允许我们在整个样式表中重用值,而预处理器如Sass和Less提供变量、嵌套规则、混合等扩展功能。 3. **动画和过渡**:`transition`用于平滑地改变两个CSS状态之间的...

    CSS教程【CSS样式CSS滤镜】CHM版

    滤镜主要在CSS3中引入,目前在现代浏览器中广泛支持。常见的CSS滤镜有: - `blur()`: 使元素模糊。 - `brightness()`: 调整元素的亮度。 - `contrast()`: 调整元素的对比度。 - `grayscale()`: 将元素转换为灰度...

    【必看】HTML+CSS去掉img图片底部的空白的3种通用方法

    通过在CSS中添加以下样式: ```css img { display: block; } ``` 这样设置后,图片就会独占一行,不再与其他元素在同一行内,自然也就没有了间距问题。 **方法二:设置图片的垂直对齐方式** 如果不想改变图片的...

    zTree js css img包

    【zTree js css img包】是一个专门用于构建前端树形结构插件的资源包,它包含了一组必要的JavaScript文件、CSS样式表以及可能用到的图像资源。zTree是一款广泛应用于网页开发中的开源项目,其核心功能是创建交互式的...

    css【Iphone】样式

    在网页设计中,为了模拟真实的设备展示或者创建互动体验,CSS(Cascading Style Sheets)技术经常被用来绘制像iPhone这样的手机样式。本资源提供的就是一个使用CSS实现的iPhone模型,适用于那些希望在网页上呈现手机...

    CSS中常用的 reset.css文件

    以下是一些常见的`reset.css`中包含的样式规则: 1. `*{margin:0;padding:0;}`:全局清除所有元素的内边距和外边距,避免元素之间的空白。 2. `body{font-size:100%;}`:设置body元素的字体大小为相对于父元素的100...

    CSS相册简洁样式

    在“img”这个文件名中,我们可以推测压缩包中可能包含了一些用于展示CSS相册样式的图片示例。在CSS相册设计中,通常会用到CSS的`background-image`属性来设置背景图片,或者直接使用`&lt;img&gt;`标签插入图片。图片的...

    css3一款鼠标移上图片高亮效果

    在CSS3中,实现鼠标移上图片高亮效果是一种常见的交互设计手法,它可以提升用户体验,使网站或应用更具吸引力。这个效果通常是通过结合使用CSS的选择器、伪类以及图像处理属性来实现的。下面我们将详细探讨如何利用...

    html+css中的img+meta+style简单用法.zip

    在这个"html+css中的img+meta+style简单用法.zip"压缩包中,我们重点关注了HTML的`&lt;img&gt;`、`&lt;meta&gt;`标签以及CSS的`style`属性的应用,这些都是创建动态和美观网页不可或缺的部分。 首先,`&lt;img&gt;`标签用于在HTML文档...

    jQuery官网CSS样式复刻

    在本项目中,“jQuery官网CSS样式复刻”是一项旨在重现jQuery官方网站前端界面样式的实践任务。这个任务主要涉及五个核心技术领域:jQuery、CSS、JavaScript(包括ECMAScript)、HTML以及网页资源管理。下面我们将...

    CSS样式表学习从门到精通

    在 CSS 中,我们可以使用内嵌样式(Inline Style)或外部样式表(External Style Sheet)来定义样式。内嵌样式是直接在 HTML 元素中定义样式,如 `; font-style: bold; color: red;"&gt;hongen&lt;/p&gt;`。外部样式表是将...

    CSS+DIV编写经验总结之CSS样式小模板

    ### CSS+DIV编写经验总结之CSS样式小模板 #### 概述 随着互联网技术的不断发展,Web前端设计已经成为了一个至关重要的领域。对于前端开发者来说,掌握CSS+DIV布局技巧是必不可少的一项技能。本文将根据提供的内容...

    html与.net css样式兼容问题解决办法

    例如,某些CSS3属性在旧版IE浏览器中可能不受支持,而在.NET项目中使用的浏览器内核可能是基于.NET框架默认配置的,这可能导致样式显示上的差异。 ##### 1.2 .NET框架中的CSS处理 .NET框架在处理HTML和CSS时有自己...

    几款不错的css特效

    在网页设计领域,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、MathML等各种XML方言)文档呈现样式的语言。CSS特效是指利用CSS的特定属性和技巧,为网页元素添加视觉上的吸引力和交互性。以下将...

Global site tag (gtag.js) - Google Analytics