0
首先,来看看这个: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;
}
}
谢谢!
虽然此代码可能回答问题,最好还提供一些解释来解释你的推理和它的作用。 – nalply
这个问题的第一部分工作。对第2部分的任何见解? – muncherelli
关于使用背景颜色和border-radius有一个已知的错误http://stackoverflow.com/questions/27526047/jagged-border-showing-due-to-background-colour-on-wrapper-element-with-border ,大多数解决方法仅适用于使用背景图像而不是图像标记的情况。唯一可以看到使用图片标签进行此操作的方法是隐藏背景并将其显示在悬停上。我更新了小提琴以反映这一点 – Goodsoup