常常遇到要做一些效果.就是在图片上添加这个图片的一些说明性的文字,这用PS处理还是很容易解决的,但如果图片一多,就会多了处理的手续,比起用DW来实现,那可是要慢多了,现整理了一个,拿出这个效果来和大伙讨论一下,如果有更好的解决方法,还望各位大虾不啬赐教. 首先:写好样式;如下: <style type="text/css"> body { margin: 0 auto; text-align: center; padding: 0 0 50px; font: 12px Arial, Helvetica, sans-serif normal; } .img-desc { position: relative; display: block; height:335px; width: 575px; margin: 0 auto; } .img-desc cite { background: #111; -moz-opacity:.55; filter:alpha(opacity=55); opacity:.55; color: #fff; position: absolute; bottom: 0; left: 0; width: 555px; padding: 10px; border-top: 1px solid #999; } </style> 其次,添加图片层,处理出在图片上显示说明性文字的效果.代码如下: <div> <img src="图片地址" alt="" /> <cite>图片的说明性文字,可以是标题.</cite> </div> 最终的效果如下图: 效果图

Words translated by CCJK


Request a call or contact us


    Call for professional assistance


    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

    Leave a Message

    Please leave us a message and
    be as detailed as possible

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.