• [织梦吧]仅有域名:www.tbea-hb.com,织梦DedeCMS学习渠道.

当时方位: > 网页制造 > DIV&CSS >

运用CSS为图片增加更多兴趣的5种办法

来历: www.tbea-hb.com 修改:织梦吧 时刻:2018-09-19点击:

今日咱们将向咱们共享一些为你平平庸俗的图片增加更多兴趣情调的简略技巧。运用Photoshop为每个图片增加某种款式尽管可行,但会是适当庸俗且困难的持久作业。下面要介绍的CSS技巧将协助你从苦楚中摆脱出来!假如你也有自己独特的CSS技巧,希望能一起共享。

暗影作用

经过运用带有一些padding之的布景图来增加暗影作用。

 

HTML

”"

CSS

img.shadow {
            background: url(shadow-1000×1000.gif) no-repeat right bottom;
            padding: 5px 10px 10px 5px;
}

双边框作用

这应该是现在最常见的技巧,咱们经过以下办法创立说边框。

 

HTML

CSS

img.double-border {
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
}

图片外框作用

上有最好的解说,这个作用是根据在上面层叠一个有通明度的图片的技能。至于IE6的PNG通明度问题,能够参阅。

 

HTML

 


 

 

 

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

 


 

CSS

.transp-block {
background: #000 url(watermark.jpg) no-repeat;
width: 575px;
height: 335px;
}
img.transparent {
filter:alpha(opacity=75);
opacity:.75;
}

为图片增加阐明文字

运用肯定定位和通明度的设置来增加灵敏的阐明。

 

HTML

 



Salone del mobile Milano, April 2008 - Peeta

 

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;
}

原文:
翻译:

 

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流渠道
  • 仅有网址 www.tbea-hb.com 网站地图
  • 联络咱们 1978130638@qq.com ,