Blog

为图片添加文字说明

常常遇到要做一些效果.就是在图片上添加这个图片的一些说明性的文字,这用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

146,096,379

Request a call or contact us

  •  

    Call ccjk.support 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

4.00
  •  
    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.
TOP