堆棧內存溢出
  簡體   English   中英

根據背景更改文本顏色

[英]Change text colour based on background

 原文  2018-02-23 08:43:42  6   3    javascript/ css

問題描述

當您將鼠標懸停在CTA上時，它會滑出。 我的問題是，根據背景顏色，有時文本難以閱讀。 我已經創建了一個我要實現的演示，您可以在這里查看：

在CodePen上演示

該演示的本質是：HTML： 

<div class="at-about-fab">
  <div class="at-about-fab__thumbnail">
    <img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
  </div>
  <div class="at-about-fab__meta">
    <h2>Call Us Now</h2>
    <p><a href="te:555-555-5555">555 555 5555</a></p>
  </div>
</div>

CSS看起來像這樣： 

.at-about-fab {
  z-index: 999999;
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  transform: translateX(100%);
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -58px;
    width: 58px;
    height: 48px;
    transform: translateY(-50%);
  }

  &:hover {
    transform: translateX(0%);

    .at-about-fab__meta {
      opacity: 1;
    }
  }

  &__thumbnail {
    position: absolute;
    top: 50%;
    left: -58px;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    border: 1px solid #EEEEEE;
    border-radius: 100%;
    padding: 4px;
    box-sizing: border-box;
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
    }
  }

  &__meta {
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    transition: 0.2s ease;

    h2,
    p {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #444444;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      color: #CCCCCC;
      font-size: 12px;
      font-weight: 400;
    }

    a {
      color: inherit;
      font-weight: 400;
      text-decoration: none;
    }
  }
}

有關如何正確解決此問題的任何建議？ 我看過一些基於JavaScript的示例，但是我的JavaScript技能還不存在。

非常感謝

3 個解決方案

解決方案1
 0  2018-02-23 09:01:48

建議不要共享可能會被刪除的異地鏈接，但這是一個好的開始。 設計時作弊的7條實用技巧

在CSS注釋中已完成摘要。 

.at-about-fab {
  z-index: 999999;
  position: fixed;
  /*Dropped the right to hide the text block a little more - you can ignore*/
  right: 0px;
  bottom: 20px;
  /*Add a background that best blends. White is not a bad option as allows many with eye issues read the text behind. Add a little padding*/
  background-color: white;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  transform: translateX(100%);
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;


  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -58px;
    width: 58px;
    height: 48px;
    transform: translateY(-50%);
  }

  &:hover {
    transform: translateX(0%);

    .at-about-fab__meta {
      opacity: 1;
    }
  }

  &__thumbnail {
    position: absolute;
    top: 50%;
    left: -58px;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    border: 1px solid #EEEEEE;
    border-radius: 100%;
    padding: 4px;
    box-sizing: border-box;
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
    }
  }

  &__meta {
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    transition: 0.2s ease;

    h2,
    p {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #444444;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      /*It is advisable not to go so off color. So lighter grey of the #444 you used is a better option so I went for #999 */
      color: #999;
      font-size: 12px;
      font-weight: 400;
    }

    a {
      color: inherit;
      font-weight: 400;
      text-decoration: none;
    }
  }
}

/* Just for the sake of testing */
.content{
    position:relative;
}


#wrapper
{
    position:relative;
}

.section
{
    width: 100%;
    text-align:center;
    padding:250px 0;
    border:1px solid #666;
}

#section1
{
    background: #fff;
}

#section2
{
    background: #000;
    color:#fff;
}

#section3
{
    background: #444444;
}

#section4
{
    background: #BA2322;
}

Codepen演示

解決方案2
 0  2018-02-23 09:23:18

您可以使用mix-blend-mode: exclusion; 在data屬性和::after選擇器的幫助下： 

 .at-about-fab { z-index: 999999; position: fixed; right: 20px; bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.2s ease; transition: 0.2s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .at-about-fab:before { content: ""; position: absolute; display: block; top: 50%; left: -58px; width: 58px; height: 48px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .at-about-fab:hover { -webkit-transform: translateX(0%); transform: translateX(0%); } .at-about-fab:hover .at-about-fab__meta { opacity: 1; } .at-about-fab__thumbnail { position: absolute; top: 50%; left: -58px; background: #FFFFFF; width: 48px; height: 48px; border: 1px solid #EEEEEE; border-radius: 100%; padding: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; cursor: pointer; } .at-about-fab__thumbnail img { display: block; width: 100%; border-radius: 100%; } .at-about-fab__meta { font-family: 'Open Sans', sans-serif; opacity: 0; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .at-about-fab__meta h2, .at-about-fab__meta p { margin: 0; padding: 0; } .at-about-fab__meta h2 { color: #444444; font-size: 14px; font-weight: 600; } .at-about-fab__meta p { color: #CCCCCC; font-size: 12px; font-weight: 400; } .at-about-fab__meta a { color: inherit; font-weight: 400; text-decoration: none; } /* Just for the sake of testing */ .content { position: relative; } #wrapper { position: relative; } .section { width: 100%; text-align: center; padding: 250px 0; border: 1px solid #666; position: relative; color: black; } .section:after { content: attr(data-content); position: absolute; width: 100%; height: auto; text-align: center; top: 50%; left: 0; mix-blend-mode: exclusion; color: white; } #section1 { background: #fff; } #section2 { background: #000; } #section3 { background: #444444; } #section4 { background: #BA2322; } 
 <!-- Credits --> <!-- Developer - Andy Tran (https://andytran.me) --> <!-- Design - Andy Tran (https://andytran.me) --> <div class="at-about-fab"> <div class="at-about-fab__thumbnail"> <img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" /> </div> <div class="at-about-fab__meta"> <h2>Call Us Now</h2> <p><a href="te:555-555-5555">555 555 5555</a></p> </div> </div> <!-- Just for the sake of testing --> <div class="content"> <div id="wrapper"> <div class="section" id="section1" data-content="section1"></div> <div class="section" id="section2" data-content="section2"></div> <div class="section" id="section3" data-content="section3"></div> <div class="section" id="section4" data-content="section4"></div> </div> </div>

這也是使用SCSS更新的代碼筆的鏈接。

解決方案3
 0 已采納  2018-02-23 10:14:36

您可以嘗試如下操作：

理念

  • 在主容器上添加mouseover事件。
  • 在此處理程序中，有一個將包含要添加的類名的變量。
  • 懸停時：
    • 獲取所有部分。
    • 用圖標的邊界檢查當前部分的邊界。
    • 如果圖標頂部大於部分頂部，請更新className變量
    • 如果沒有，請打破循環。
    • 現在刪除所有類，將className添加到容器中。 您還必須使用CSS編寫相應的類。

示例： 更新的CodePen 

var iconContainer = document.querySelector('.at-about-fab');

iconContainer.addEventListener('mouseover', function () {
  var bounds = this.getBoundingClientRect();
  var sections = document.querySelectorAll('.section');
  var className = '';
  Array.from(sections).some(function(el) {
    var currentBounds = el.getBoundingClientRect();
    if(bounds.top > currentBounds.top) {
      className = el.getAttribute('id');
    }
    else {
      return true;
    }
  });
  this.classList.remove('section1', 'section2', 'section3', 'section4');
  this.classList.add(className);
})

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何根據動態變化的背景顏色動態更改文本顏色 使用jQuery和CSS根據另一個文本更改div的背景顏色 根據背景顏色輸入更改文本前景的顏色 根據背景顏色更改多個元素顏色 單擊更改背景顏色和文本顏色 用jQuery將文本顏色更改為背景顏色 根據值更改 td 背景顏色 如何根據條件更改輪播中的背景顏色 根據復選框更改表格單元格背景色 根據值輸出更改背景顏色
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM