【问题标题】:HTML + CSS Rendered colorsHTML + CSS 渲染颜色
【发布时间】:2015-02-20 08:46:46
【问题描述】:

我不知道为什么我在页面加载时会得到两种不同的颜色。我从元素检查器中查看了 Computed 和 Styles 选项卡,但这向我显示了每个选项卡的相同值。

图片:

第一个样式是标题,另一个是“Seguir Leyendo”,一个“阅读更多”链接,最重要的是,没有字母,也没有任何不同的色调。

任何线索为什么会发生这种情况?

添加:

HTML:

<div class="blog_entry">
    <div class="blog_entry_image">
        <a href="home-blog-detail-one.html"><img src="img/blog_imagen_1.png" class="blog_image_home"alt="Blog entry 1"></a>
    </div>
    <div class="blog_entry_desc">
    <h2 class="blog_entry_title"><a href="home-blog-detail-one.html">Lorem ipsum dolor sit amet, consectetur 
                        adipiscing lit. Phaiop ellus ut diam nibh consectetur adpiscing</a></h2>
    </div>
    <div class="blog_entry_date">
        28 Diciembre 2014
    </div>
    <div class="blog_entry_text">
        <p>Nulla arcu quam, tempor a mattis sit amet, efficitur eget ante. Integer elit 
                        libero, rutrum eu augue ut, faucibus dictum nibh. Suspendisse vitae ex sit amet 
                        tellus molestie interdum...</p>
    </div>
    <div class="blog_entry_options">
        <img src="img/blog_facebook.png" alt="Facebook">
        <img src="img/blog_twitter.png" alt="Twitter">
        <a href="home-blog-detail-one.html">Seguir leyendo  <img src="img/arrow_read_more.png" alt="Seguir leyendo"></a>
    </div>
    <div class="clearfix"></div>
</div>

CSS:

.blog_entry_title {
    font-size: 24px;
}
.blog_entry_title a, .blog_title_detail {
    color: #008ed6;
    text-decoration: none;
    font-family: HelveticaNeueThin;
}
.blog_entry_options {
    position: absolute;
    bottom: 0;
    right: 0;
}
.blog_entry_options a {
    color: #008ed6;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 17px;
}

【问题讨论】:

  • 如果没有 HTML 代码,我不能完全确定。但我假设它是一个标题并且有额外的 CSS 属性。
  • 请粘贴一些 html .. 我在这里得到的唯一差异是字体大小.. 尝试自己使两个字体大小相同并粘贴结果..
  • 它必须是一些额外的样式。也许阅读更多是一个链接,而 Lorem ipsum 是一个 h1、h2 .. 元素???检查萤火虫是否有任何其他样式。它应该会有所帮助。
  • @Michat Kutra 都是链接,标题是 h2 内的链接。我查看了元素检查器,两个选项卡、样式和计算,我看不出很多差异,两者都具有相同的 rgb 颜色(不是 rgba),而不是 alpha 或不透明度......
  • 没有色差,唯一的就是字体粗细,尝试更新font-weight和font-size,你不会看到色差的!!

标签: html css colors styles


【解决方案1】:

通过更新/重置font-weight,您可以看到神奇之处:

CSS:

.blog_entry_title a{ font-weight: normal }

【讨论】:

  • 思想是这样的。我们也有一个 h1 标题,它与之前的链接颜色相同,所以我看到它也有正常的字体粗细,只需要 h2 也有它。谢谢
猜你喜欢
  • 1970-01-01
  • 2018-04-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多