我正在尝试在CSS中的图像上创建叠加阴影,但我似乎无法正确使用它。
这是我到目前为止的代码。
HTML
<section id="top-container" class="top-column" style="width:1050px; height:420px; ">
<div class="image" style="padding-top: 10px; float:left;"><img src="http://www.hdwallpapersinn.com/wp-content/uploads/2012/09/HD-Wallpaper-1920x1080.jpg" border="0"; width="263"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;">
<h4 style="font-size:30px; top: 90px; ">Nature</h4></div>
<div class="image" style="padding-top: 10px; float:left;"><img src="http://www.hdwallpapersart.com/wp-content/uploads/2013/04/tiger_wallpapers_hd_Bengal_Tiger_hd_wallpaper1.jpg" border="0"; width="262"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; ">
<h4 style="font-size:30px; top: 90px; ">Bengal Tiger</h4></div>
</section>
CSS
.image {
position: relative;
}
h4 {
position: absolute;
width: 100%;
color: #fff;
float: left;
position: absolute;
font-size: 40px;
font-family: "Oswald";
text-align: center;
max-height:auto;
z-index:20;
text-shadow:1px 1px 2px #000;
-moz-text-shadow:1px 1px 2px #000;
-ms-text-shadow:1px 1px 2px #000;
-o-text-shadow:1px 1px 2px #000;
-webkit-text-shadow:1px 1px 2px #000;
}
我基本上希望它看起来像这个网站中的那个。我尝试在网上查看一些教程,但它把它搞砸了,所以我把它删除了。我希望它在我悬停在图像上之前和之后看起来像这个网站中的那个。非常感谢能帮助我的人。
答案 0 :(得分:0)
喜欢这个
<强> demo 强>
<强> CSS 强>
.image {
position: relative;
-webkit-box-shadow: inset 0 0 10px 10px #000;
-moz-box-shadow: inset 0 0 10px 10px #000;
box-shadow: inset 0 0 10px 10px #000;
}
OR REF LINK
答案 1 :(得分:0)
你的文字阴影效果实际上似乎工作正常,只是html中的一些语法错误,需要导入字体。此外,您不需要为text-shadow
规则提供前缀。
选中DEMO。
修改:我同意上述评论 - 是的,如果您尝试为图片添加框阴影,请使用box-shadow
。