您的位置：首页 > Web前端 > CSS

八面玲珑：巧用CSS为图片添加修饰点缀效果

2008-10-21 09:54 555 查看

[b]原文来自：CSS Decorative Gallery

翻译整理：西米CC[/b]

基本原理【Basic Concept】：

要实现本实例的效果，需要在DIV或A等图片容器中添加一个额外的标签，最终的修饰效果就是通过对span设置背景来实现的。当然如果你不希望在你的代码中插入这个span标签，也可以用JS的方法来实现，在本教程中也将提及：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Demo | Photo With Text</title>

<style type="text/css">

body {

margin: 0 auto;

padding: 0;

width: 607px;

font: 70%/140% Arial, Helvetica, sans-serif;

}

h1 {

background: #fdcd07;

margin: 20px 0 10px;

padding: 4px;

text-align: center;

color: #801d03;

font: 310%/100% Garamond, Georgia, serif;

letter-spacing: 2px;

text-transform: uppercase;

}

h1 em {

border: dashed 1px #e3792c;

display: block;

padding: 10px 0;

font-style: normal;

}

.credits {

width: 280px;

margin: 0 auto 20px;

text-align: center;

border-bottom: solid 1px #ccc;

padding: 0 0 8px 0;

font: 130%/110% Garamond, Georgia, serif;

}

.credits em {

color: #999;

}

.credits a {

color: #333;

text-decoration: none;

text-transform: uppercase;

}

.credits a:hover {

text-decoration: underline;

}

img {

border: none;

}

/* ---------- gallery styles start here ----------------------- */

.gallery {

list-style: none;

margin: 0;

padding: 0;

}

.gallery li {

padding: 10px;

margin: 0;

float: left;

position: relative;

width: 180px;

height: 130px;

}

.gallery li:hover img {

border-color: #000;

}

.gallery img {

background: #fff;

border: solid 1px #888;

padding: 5px;

}

.gallery em {

background: #fff url(images/grey-gradient.gif) repeat-y;

color: #000;

font-style: normal;

padding: 2px 10px;

display: block;

position: absolute;

top: 110px;

left: 9px;

border: 1px solid #999;

border-left-color: #888;

}

.gallery a {

text-decoration: none;

}

.gallery a:hover em {

background: #ffdb01 url(images/orange-gradient.gif) repeat-y;

border-color: #c25b08;

}

.STYLE1 { font-size: 36px;

color: #CC0000;

}

</style>

</head>

<body>

<h1>简单文字介绍 

<a href="http://ximicc.com" class="STYLE1">翻译：西米CC</a></h1>

 by: <a href="http://www.webdesignerwall.com">Web Designer Wall</a>

<ul class="gallery">

<li><a href="http://ximicc.com">Abstract<img src="images/1.jpg" alt="image" border="0" /></a></li>

<li><a href="http://ximicc.com">Life<img src="images/2.jpg" alt="image" border="0" /></a></li>

<li><a href="http://ximicc.com">Virus<img src="images/3.jpg" alt="image" border="0" /></a></li>

<li><a href="http://ximicc.com">Butterfly<img src="images/5.jpg" alt="image" border="0" /></a></li>

<li><a href="http://ximicc.com">Flow<img src="images/9.jpg" alt="image" border="0" /></a></li>

<li><a href="http://ximicc.com">Nature<img src="images/14.jpg" alt="image" border="0" /></a></li>

<li><a href="http://ximicc.com">Cassie<img src="images/6.jpg" alt="image" border="0" /></a></li>

<li><a href="http://ximicc.com">DJ<img src="images/7.jpg" alt="image" border="0" /></a></li>

<li><a href="http://ximicc.com">Car<img src="images/10.jpg" alt="image" border="0" /></a></li>

</ul>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航