在做网页的时候，特别是那些具有商业性质的网站，往往需要在网站中设置广告图片，这就需要给这些广告图片添加一些类似于“广告”字样的标识，避免给网站用户带来不必要的损失。有些朋友直接在广告图片制作的时候，就把广告二字制作在图片中，这样的方法倒是还可以，但是更换的时候还是比较麻烦，还需要重新更改图片。下面，玄机科技就给大家分享一段代码，直接把“广告”二字用代码的形式加在图片上，这样大大方便了广告更换。先来看看最终的效果：



将“广告”二字悬浮于图片的上方，背景用半透明的黑色来存底，这样就显得专业的多了，当然，对于这个位置，稍微懂点HTML的朋友就可以随意的调整。下面是具体的代码：

<a href="https://www.myxuanji.com" target="_blank" style="text-decoration:none;"><div style="width:350px; height:380px; background:url(/images/ad/houqe170229b.jpg) "><span style="background: rgba(0,0,0,0.6) !important;line-height: 20px;padding:2px 5px 3px 5px;color: #fff;">广告</span></div></a>