【发布时间】：2015-12-02 02:30:52
【问题描述】：
首先，看看这个：http://jsfiddle.net/muncherelli/1kkus9bd/1/
我的 HTML/CSS 有两个问题：
- 此 HTML 中的 img 周围有一个链接。我希望在此图像/链接之上有一些文本和其他链接，但图像仍应作为链接工作（当您将鼠标悬停在其上时会变暗）。尝试使用“blog-post-feature-overlay-content”类删除整个 div，您会看到它正常工作，但是一旦我重新添加该 div，它就无法工作了。
- 为了让图像在悬停时变暗，我使用了背景颜色为黑色的不透明度选择器。我还有一个边框舍入属性，用于柔化图像（和底层 div）的角。底部（图像下方）似乎有一条黑线，有时，根据我的浏览器的宽度，一些黑线会从角落里窥视。我怎样才能摆脱它？
要考虑的一件事：我正在使用引导框架，但我不确定它是否会影响或帮助或伤害这种情况。
（不确定我是否需要在这里问两个问题，但它们似乎是相关的）。
这是我正在使用的 HTML/CSS：
HTML：
<br />
<div class="container">
<div class="row">
<div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 nopadding">
<div class="blog-post-feature-overlay-container roundy">
<a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane">
<img src="http://cache.blog.munchimages.com/blog/wp-content/uploads/2015/07/MI_73-Feature-1200x620.jpg" class="img-responsive roundy blog-post-feature-image" />
</a>
<div class="blog-post-feature-overlay-content">
<div class="blog-post-feature-overlay-content-top text-right">
<a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane" class="blog-category-box general-font-title-serif transition-color-ease-500">Latest Post</a>
<a href="http://munchimages.com/blog/session-stories/" class="blog-category-box general-font-title-serif transition-color-ease-500">Session Stories</a>
</div>
<div class="blog-post-feature-overlay-content-bottom">
<h1 class="general-font-title-serif">
<a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane" class="blog-post-feature-overlay-content-title color-white transition-color-ease-500">
4th of July
</a>
</h1>
</div>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div>
</div>
</div>
CSS：
.general-font-title-serif {
font-family:'Cinzel', serif;
}
.nopadding {
margin: 0 !important;
padding: 0 !important;
}
.blog-post-feature-image:hover {
opacity: 0.9;
}
.color-white {
color: white;
}
.roundy {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.transition-color-ease-500 {
-moz-transition: background-color 500ms, color 500ms ease-out;
-ms-transition: background-color 500ms, color 500ms ease-out;
-o-transition: background-color 500ms, color 500ms ease-out;
-webkit-transition: background-color 500ms, color 500ms ease-out;
transition: background-color 500ms, color 500ms ease-out;
}
div.blog-post-feature-overlay-container {
background-color: #000;
position: relative;
}
div.blog-post-feature-overlay-content {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
div.blog-post-feature-overlay-content-top {
position: absolute;
right: 20px;
top: 20px;
}
div.blog-post-feature-overlay-content-bottom {
position: absolute;
bottom: 20px;
left: 20px;
}
a.blog-category-box {
background-color: #ccc;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 13px;
padding: 5px 15px;
text-transform: uppercase;
}
a.blog-category-box:hover {
background-color: rgba(0, 0, 0, 0.6);
text-decoration: none;
}
a.blog-post-feature-overlay-content-title {
text-shadow: 1px 1px #000;
}
a.blog-post-feature-overlay-content-title:hover {
color: #ddd;
text-decoration: none;
}
@media (max-width: 768px) {
.roundy {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
h1 {
font-size: 30px;
}
}
谢谢！
【问题讨论】：
标签： css