1

我正在尝试在 CSS 中的图像上创建覆盖阴影，但我似乎无法正确处理。

这是我到目前为止的代码。

http://jsfiddle.net/Qf4Ka/1/

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;
}

我基本上希望它看起来像这个网站上的那个。我试着在网上看一些教程，但它搞砸了，所以我把它删除了。我希望它在我将鼠标悬停在图像周围之前和之后看起来像本网站中的那个。非常感谢任何可以帮助我的人。

http://vr-zone.com/

4

2 回答 2

1

像这样

演示

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;

}

或参考链接

于 2013-09-28T07:35:46.487 回答
0

您的文本阴影效果实际上似乎工作正常，只是 html 中出现了一些语法错误，需要导入字体。此外，您不需要为text-shadow规则添加供应商前缀。

检查这个演示。

编辑：我同意上面的评论 - 是的，如果你想给图像加上 box-shadow，那么使用box-shadow.

于 2013-09-28T07:36:30.887 回答