使用 Visual Studio 2012、Umbraco 7 c# .net 4 css3 boostrap。
好的,所以我已经了解了所有标准的“图像上的文本”内容,并且它在 js fiddle 等中有效,但是我的情况略有不同。
CSS:
.project-tile{
display:inline-block;
position: relative;
}
.project-tile:after{
content:'';
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
display: block;
position: absolute;
background: #26C1E3;
opacity: 0.0;
}
.project-tile:hover:after{
opacity: 0.75;
transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s;
}
.text-left-overlay{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
}
这是 html:
<div class="col-sm-8 col-md-8 col-lg-8 testborder col-nopad ">
<div class="project-tile">
<img class="img-responsive project-image" src="../media/temp/18Pedruscot-2-1280x480.jpg" alt="" />
<p class="text-left-overlay">Title Text</p>
</div>
</div>
所以我已经有了在图像顶部显示蓝色不透明背景的悬停效果。
由于这是如何完成的,文本叠加层并没有真正起作用。
我需要在将鼠标悬停在图像上方并覆盖时显示文本,稍后我将添加我自己的过渡等,但现在这并不重要。
我需要做哪些调整才能实现这一目标?
如果您无法理解我的问题,请告诉我,我会尽力提供更多信息
最佳答案
试试这个:http://jsfiddle.net/yr1x7uwu/
我已将标题文本移到 HTML 中的图像之前,因为它没有覆盖它,并将悬停状态添加到 text-left-overlay
。
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.project-tile{
display:inline-block;
position: relative;
}
.project-tile:after{
content:'';
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
display: block;
position: absolute;
background: #26C1E3;
opacity: 0.0;
}
.project-tile:hover:after{
opacity: 0.75;
transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s;
}
.project-tile:hover .text-left-overlay {
opacity: 1;
}
.text-left-overlay{
z-index:100;
position:absolute;
color:black;
font-size:24px;
font-weight:bold;
opacity: 0;
transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s;
}
<div class="col-sm-8 col-md-8 col-lg-8 testborder col-nopad ">
<div class="project-tile">
<p class="text-left-overlay">Title Text</p>
<img class="img-responsive project-image" src="http://s9.postimg.org/54ngc5yvz/18_Pedruscot_2_1280x480.jpg" alt="" />
</div>
</div>
这就是您想要实现的目标吗?
关于c# - 图像上的文字 css(略有不同),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28320404/