帝国CMS您现在的位置是:首页 > 博客日志 > 帝国CMS

帝国cms轮播图添加标题

<a href='mailto:'>微wx笑</a>的头像微wx笑 2019-09-02帝国CMS371 20 0关键字: 帝国cms  

帝国cms轮播图添加标题由于要在图片之上再显示文字链接,所以这里使用绝对定位:相关HTML:<div class="banbox"> <div class="banner"> <div id="banner" class="fader">

帝国cms轮播图添加标题nEn无知

由于要在图片之上再显示文字链接,所以这里使用绝对定位:nEn无知

相关HTML:nEn无知

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="banbox">    
<div class="banner">    
<div id="banner" class="fader">    
<div class="slide"><a href="/e/public/ClickAad?adid=3" target="_blank"><img src="/ue-upload/image/20190719/1563512794106141.jpg"></a><span><a href="/e/public/ClickAad?adid=3" target="_blank">向员工计费的公司</a></span></div>    
<div class="slide"><a href="/e/public/ClickAad?adid=2" target="_blank"><img src="https://www.ivu4e.com/ue-upload/image/20190717/1563348313950303.png"></a><span><a href="/e/public/ClickAad?adid=2" target="_blank">Change your words,change your world</a></span></div>    
<div class="slide"><a href="/e/public/ClickAad?adid=1" target="_blank"><img src="https://www.ivu4e.com/ue-upload/image/20190717/1563348201548674.png"></a><span><a href="/e/public/ClickAad?adid=1" target="_blank">泰国经典感人广告,一个善良的人会得到什么?</a></span></div>    
<div class="fader_controls">    
<div class="page prev" data-target="prev"></div>    
<div class="page next" data-target="next"></div>    
<ul class="pager_list">    
</ul>    
</div>    
</div>    
</div>    
</div>

相关CSS:
nEn无知

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*banner*/
.banbox { width68.5%overflowhiddenfloatleft; border-radius: 3pxmargin-bottom20px }
.banner { width100%overflowhiddenfloatleft; }
.fader { positionrelativewidth100%height260px/*padding-top: 50%;*/ font-family"futura"arialoverflowhidden; }
.fader .slide { positionabsolutewidth100%height100%top0z-index1; opacity: 0background:gray; }
.fader .slide a { width100%height100%; }
.fader .slide span { positionabsolutewidth100%height30pxpadding0line-height30pxbottom40pxtext-aligncenterz-index99font-size24pxcolorgray; }
.fader .slide img { width100%height260pxmarginauto; }
.fader .prev, .fader .next { positionabsoluteheight32pxline-height32pxwidth40pxtop50%left50pxz-index4margin-top-25pxcursorpointer; opacity: 0; transition: all 150ms; }
.fader .prev { backgroundurl(../images/left.png) no-repeat }
.fader .next { leftautoright50pxbackgroundurl(../images/right.png) no-repeat }
.fader .pager_list { positionabsolutewidth100%height26pxpadding0line-height40pxbottom0text-aligncenterz-index4; }
.fader .pager_list li { border-radius: 10pxdisplay: inline-blockwidth10pxheight10pxmargin0 7pxbackground#fff; opacity: .9text-indent-9999pxcursorpointer; transition: all 150ms; }
.fader .pager_list li:hover, .fader .pager_list li.active { opacity: 1background#12b7de; }
.banner:hover .fader_controls .page.prev { opacity: .7left20px }
.banner:hover .fader_controls .page.next { opacity: .7right20px }

但是由于图片颜色的差异很大,所以显示效果很不理想:
nEn无知

image.pngnEn无知

可以加上背景色和透明度,这样效果会好一些。nEn无知

image.pngnEn无知

image.pngnEn无知

image.pngnEn无知

因此在技术上可以实现,但是为了更好的显示的效果,最好还是对图片进行处理,把文字写在图片上,这样可以根据图片的颜色设置字体的颜色。nEn无知

本文由 微wx笑 创作,采用 署名-非商业性使用-相同方式共享 4.0 许可协议,转载请附上原文出处链接及本声明。
原文链接:https://www.ivu4e.cn/blog/EmpireCMS/2019-09-02/173.html

很赞哦! (22) 有话说 (0)

文章评论