使用CSS为图片添加更多趣味的5种方…
来源:互联网 发布:网络保密十不准 编辑:程序博客网 时间:2024/05/01 04:47
今天我们将向大家分享一些为你平淡乏味的图片添加更多趣味情调的简单技巧。使用Photoshop为每个图片添加某种样式虽然可行,但会是相当乏味且困难的长久工作。下面要介绍的CSS技巧将帮助你从痛苦中解脱出来!如果你也有自己独到的CSS技巧,希望能一同分享。
阴影效果
通过使用带有一些padding之的背景图来添加阴影效果。
效果预览
HTML
<img class=”shadow” src=”sample.jpg” alt=”"/>
CSS
img.shadow {
background: url(shadow-1000×1000.gif) no-repeatright bottom;
padding: 5px 10px 10px 5px;
}
双边框效果
这应该是目前最常见的技巧,我们通过以下方式创建说边框。
效果预览
HTML
<img class="double-border" src="sample.jpg"alt="" />
CSS
img.double-border {
border: 5px solid #ddd;
padding: 5px;
background: #fff;
}
图片外框效果
webdesignerwall.com上有最好的讲解,这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题,可以参考这篇教程。
效果预览
HTML
<div class="frame-block">
<span> </span><img src="sample.jpg" alt=""/>
</div>
CSS
.frame-block {
position: relative;
display: block;
height:335px;
width: 575px;
}
.frame-block span {
background: url(frame.png) no-repeat center top;
height:335px;
width: 575px;
display: block;
position: absolute;
}
水印效果
你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印
效果预览
HTML
<div class="transp-block">
<img class="transparent" src="sample.jpg" alt=""/>
</div>
CSS
.transp-block {
background: #000 url(watermark.jpg) no-repeat;
width: 575px;
height: 335px;
}
img.transparent {
filter:alpha(opacity=75);
opacity:.75;
}
为图片添加说明文字
使用绝对定位和透明度的设置来添加灵活的说明。
效果预览
HTML
<div class="img-desc">
<img src="sample.jpg" alt="" />
<cite>Salone del mobile Milano, April2008 - Peeta</cite>
</div>
CSS
.img-desc {
position: relative;
display: block;
height:335px;
width: 575px;
}
.img-desc cite {
background: #111;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 555px;
padding: 10px;
border-top: 1px solid #999;
}
- 使用CSS为图片添加更多趣味的5种方…
- CSS为图片添加更多趣味的5种方法
- IOS为图片添加手势的使用
- 使用animate.css为你的网页添加动画
- 使用GPUImage 的lookup table为图片添加滤镜
- 一些Ubuntu的趣味图片
- 一些Ubuntu的趣味图片
- 使用css将图片切为圆形
- 使用Java为图片添加水印
- 使用canvas为图片添加阴影效果
- 使用jquery+css实现更多+收起的功能
- HTML+CSS使用CSS为网页添加样式 (4)
- HTML+CSS使用CSS为网页添加样式 (4)
- 使用typings给vscode添加更多的智能提示
- 集合了上百种趣味图片生成的网站-Imagechef
- 使用 Cocoapods 添加第三方的步骤
- 给图片添加圆框的css
- 用SetMenuInfo 为菜单添加更多特性
- 把SVN插件配置到MyEclipse8.6
- CSS盒子模式<css定位>2
- 详细解释织梦DEDECMS的默认模板的C…
- 避免表格table被撑开变形的CSS代码…
- 使用 Excel Services ,结合 Analysis Services 在 SharePoint 中发布报表(转)
- 使用CSS为图片添加更多趣味的5种方…
- 5种方法立刻写出更好的CSS代码
- 多个DIV排列时居中
- 可纵,乐不可极,志不可满
- Gvim的配置文件vimrc_example.vim
- vi/vim 基本使用方法
- 兼容IE6的十条有用的修复方法
- ie8如何兼容ie6
- IE6兼容问题汇总