如何更改块外文本的颜色？ JS/CSS

Question

在这种情况下，我有背景图片和文字。我的文字是白色的，但是当文字很多的时候，有些会超出背景图，看不出来。请告诉我如何制作超出背景图片的文字，与背景图片颜色相同（蓝色）

也许在css上有解决方案，也许在js上，任何解决方案都可以。如果你告诉我这个效果的名称，我也将不胜感激。

结果应该是这样的：

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

a {
  text-decoration: none;
  padding: 0;
  margin: 0; }

a:active {
  text-decoration: none; }

a:visited {
  text-decoration: none; }

ul {
  list-style: none;
  padding: 0;
  margin: 0; }

body {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #fff;
  cursor: default; }

html,
body {
  height: 100%; }

.container {
  max-width: 1180px;
  padding: 0 20px;
  margin: 0 auto; }

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%; }

main {
  flex: 1 1 auto; }

.header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 10;
  padding: 15px 0;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background: #4a9428; }

.header--scrolled {
  background: #4a9428; }

.header--body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.header--logo {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal; }

.header--logo img {
  display: block;
  width: auto;
  max-height: 36px; }

.logo--icon {
  margin-right: 10px; }

.logo--text {
  font-family: 'Roboto Slab', sans-serif;
  font-size: 32px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff; }

.header--nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.nav--list a {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  -webkit-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear; }

.nav--list a:hover {
  color: #ffe600; }

.nav--list:not(:last-child) {
  margin-right: 30px; }

.nav--list-active {
  color: #ffe600; }

.button {
  padding: 8px 25px;
  background: transparent;
  border: 2px solid #ffe600;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #ffe600;
  cursor: pointer; }

.burger-menu {
  display: none;
  top: 0px;
  right: 0px;
  z-index: 100; }

#menuToggle {
  display: block;
  position: relative;
  z-index: 100;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

#menuToggle input {
  display: block;
  width: 48px;
  height: 30px;
  position: absolute;
  top: -4px;
  left: -4px;
  cursor: pointer;
  opacity: 0;
  z-index: 100;
  -webkit-touch-callout: none; }

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #ffe600;
  border-radius: 3px;
  z-index: 1;
  -webkit-transform-origin: 4px 0px;
  -ms-transform-origin: 4px 0px;
  transform-origin: 4px 0px;
  -webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }

#menuToggle span:first-child {
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%; }

#menuToggle span:nth-last-child(2) {
  -webkit-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%; }

#menuToggle input:checked ~ span {
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-2px, -1px);
  -ms-transform: rotate(45deg) translate(-2px, -1px);
  transform: rotate(45deg) translate(-2px, -1px);
  background: #393939 !important; }

#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
  -ms-transform: rotate(0deg) scale(0.2, 0.2);
  transform: rotate(0deg) scale(0.2, 0.2); }

#menuToggle input:checked ~ span:nth-last-child(2) {
  opacity: 1;
  -webkit-transform: rotate(-45deg) translate(0, -1px);
  -ms-transform: rotate(-45deg) translate(0, -1px);
  transform: rotate(-45deg) translate(0, -1px); }

#menu {
  position: absolute;
  pointer-events: none;
  width: 440px;
  height: 200vh;
  margin: -100px 0 0 0;
  padding: 20px;
  padding-top: 130px;
  right: -100px;
  background: #fff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  transform: translate(100%, 0);
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  -o-transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #2c2c2c;
  padding-right: 90px; }

#menuToggle input:checked ~ ul {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1; }

.backdrop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: opacity 0.1s ease-out;
  -o-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
  pointer-events: none; }

.nav-box--link {
  display: block;
  padding: 12px 10px; }

.active {
  color: #ffe600 !important; }

.backdrop {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: opacity 0.1s ease-out;
  -o-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
  pointer-events: none;
  position: relative; }

.burger-menu-link li {
  margin-bottom: 50px; }

.hero {
  padding: 80px 0; }
  .hero__body {
    position: relative;
    min-height: 1198px; }
  .hero__bg {
    position: relative;
    top: 155px;
    left: 50%;
    transform: translateX(-50%);
    height: 990px;
    width: auto; }
    .hero__bg img {
      width: 100%;
      height: 100%; }
  .hero__img {
    position: relative;
    z-index: 2;
    margin-top: -900px;
    width: 570px;
    height: 570px;
    overflow: hidden;
    border-radius: 50%; }
    .hero__img img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .hero__content {
    position: relative;
    z-index: 3;
    color: #fff;
    padding: 30px;
    max-width: 623px;
    margin: -181px 153px 60px auto; }

.section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 60px;
  margin-bottom: 20px; }

.section-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.8; }

.footer {
  color: #fff;
  background-color: #4a9428;
  padding: 60px 0 0; }

.footer--body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

.footer--top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin: -12px;
  margin-bottom: 40px; }

.ft--items {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 33%;
  flex: 1 0 33%;
  padding: 12px; }

.ft--left-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.fli--logo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer; }

.fli--logo img {
  display: block;
  width: auto;
  max-height: 36px; }

.fli--logo-text {
  font-size: 28px;
  color: #fff; }

.fli--address {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  color: #fff;
  margin-bottom: 30px; }

.fli--phone-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  color: #fff; }

.fli--text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  color: #fff; }

.fli--mail {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  color: #fff;
  margin-bottom: 20px; }

.fli--social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.fli--social-item {
  display: block;
  line-height: 1;
  padding: 8px 0;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }

.fli--social-item:hover {
  background: #fff;
  text-decoration: none; }

.fli--social-item:hover i {
  color: #4a9428; }

.fli--social-item:not(:last-child) {
  margin-right: 8px; }

.fli--social-item i {
  font-size: 18px;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }

.fci--list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.fci--link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.fci--link span {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: #fff; }

.fci--link span:hover {
  color: #ffe600; }

.fci--link:not(:last-child) {
  margin-bottom: 20px; }

.fci--link i {
  font-size: 12px;
  color: #ffe600;
  margin-right: 8px; }

.fri--title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 20px; }

.fri--text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #fff; }

.footer--bottom {
  padding: 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-top: 1px solid #fff;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #fff; }

/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,400;0,500;0,600;1,300&display=swap"
    rel="stylesheet">
  <script src="https://kit.fontawesome.com/1774739131.js?_v=20220513104519" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/style.css">
  <title>Travel</title>
</head>

<body>

  <div class="wrapper">
    <header class="header">
      <div class="container">
        <div class="header--body">
          <div class="header--logo logo">
            <!--START BLOCK HeaderLogo-->
            <!-- <img src="img/organic-icon.svg" alt="{HeaderName-Seitename}" class="logo--icon"> -->
            <!--END BLOCK HeaderLogo-->

            <!--START BLOCK HeaderName-->
            <div class="logo--text">Organic</div>
            <!--END BLOCK HeaderName-->
          </div>
          <ul class="header--nav nav">
            <li class="nav--list">
              <a href="#s-hero" class="nav--link">Hero</a>
            </li>

            <!--START BLOCK Benefits-->
            <li class="nav--list">
              <a href="#s-about" class="nav--link">About</a>
            </li>
            <!-- END BLOCK Benefits-->

            <!--START BLOCK Recommendation-->
            <li class="nav--list">
              <a href="#s-products" class="nav--link">Products</a>
            </li>
            <!-- END BLOCK Recommendation-->

            <!--START BLOCK Goals-->
            <li class="nav--list">
              <a href="#s-sale" class="nav--link">Sale</a>
            </li>
            <!-- END BLOCK Goals-->

            <!--START BLOCK Recipes-->
            <li class="nav--list">
              <a href="#s-interesting" class="nav--link">Interesting</a>
            </li>
            <!-- END BLOCK Recipes-->
          </ul>
          <div class="burger-menu">
            <nav role='navigation'>
              <div id="menuToggle">
                <input id="showBtn" type="checkbox" />
                <span></span>
                <span></span>
                <span></span>
                <ul id="menu" class="nav-box">
                  <a class="nav-box--link" href="#s-hero">Hero</a>

                  <!--START BLOCK Benefits-->
                  <a class="nav-box--link" href="#s-about">About</a>
                  <!-- END BLOCK Benefits-->

                  <!--START BLOCK Recommendation-->
                  <a class="nav-box--link" href="#s-products">Products</a>
                  <!-- END BLOCK Recommendation-->

                  <!--START BLOCK Goals-->
                  <a class="nav-box--link" href="#s-sale">Sale</a>
                  <!-- END BLOCK Goals-->

                  <!--START BLOCK Recipes-->
                  <a class="nav-box--link" href="#s-interesting">Interesting</a>
                  <!-- END BLOCK Recipes-->
                </ul>
              </div>
              <div class="backdrop"></div>
            </nav>
          </div>
        </div>
      </div>
    </header>

    <main class="main">
      <section class="hero">
        <div class="container">
          <div class="hero__body">
            <div class="hero__bg">
              <img src="https://i.ibb.co/PQ3kr5Q/section-hero-bg.png" alt="section-hero-bg" border="0"/>
            </div>
            <div class="hero__img">
              <img src="https://i.ibb.co/zNSCFjh/hero-img.jpg" alt="hero-img" border="0" />
            </div>
            <div class="hero__content">
              <h1 class="hero__title section-title">Volcano Tours & Adventure Travel</h1>
              <div class="hero__text section-text">
                Lectus sit amet est placerat in egestas. Integer eget aliquet nibh praesent tristique magna sit. Congue
                quisque egestas diam in arcu cursus.
              </div>
            </div>
          </div>
        </div>
      </section>

    </main>

    <footer class="footer">
      <div class="container">
        <div class="footer--body">
          <div class="footer--top ft">
            <div class="ft--left-item fli ft--items">
              <div class="fli--logo">
                <!-- <img src="img/organic-icon.svg" alt="{HeaderName-Seitename}" class="logo--icon"> -->
                <div class="logo--text fli--logo-text">ORGANIC</div>
              </div>
              <div class="fli--address">
                A108 Adam Street
                NY 535022, USA
              </div>
              <div class="fli--phone">
                <span class="fli--phone-title">Phone:</span>
                <span class="fli--phone-text fli--text">+1 5589 55488 55</span>
              </div>
              <div class="fli--mail">
                <span class="fli--mail-title ">Email:</span>
                <span class="fli--phone-text fli--text">info@example.com</span>
              </div>
              <div class="fli--social">
                <a href="#" class="fli--social-item">
                  <i class="fa-brands fa-twitter"></i>
                </a>
                <a href="#" class="fli--social-item">
                  <i class="fa-brands fa-facebook"></i>
                </a>
                <a href="#" class="fli--social-item">
                  <i class="fa-brands fa-instagram"></i>
                </a>
                <a href="#" class="fli--social-item">
                  <i class="fa-brands fa-linkedin"></i>
                </a>
              </div>
            </div>
            <div class="ft--center-item fci ft--items">
              <ul class="fci--list">
                <a href="#s-hero" class="fci--link"><i class="fa-solid fa-angle-right"></i><span>Home</span></a>
                <a href="#s-benefits" class="fci--link"><i class="fa-solid fa-angle-right"></i><span>Benefits</span></a>
                <a href="#s-recommendation" class="fci--link"><i
                    class="fa-solid fa-angle-right"></i><span>Recommendation</span></a>
                <a href="#s-goals" class="fci--link"><i class="fa-solid fa-angle-right"></i><span>Goals</span></a>
                <a href="#s-recipes" class="fci--link"><i class="fa-solid fa-angle-right"></i><span>Recipes</span></a>
                <a href="impressum.html" class="fci--link"><i class="fa-solid fa-angle-right"></i><span>Impressum und
                    Datenschutzerklärung</span></a>
              </ul>
            </div>
            <div class="ft--right-item fri ft--items">
              <h4 class="fri--title">Footer Info</h4>
              <div class="fri--text">
                Ihre Website ist so programmiert, dass sie keine Cookies sammelt, deswegen brauchen Sie auch keine
                weiteren
                Zustimmungsfenstern für eine Zuslassung der Cookies. Das wird auch in ihrer - Ihre Website ist so
                programmiert, dass sie keine Cookies sammelt, deswegen brauchen Sie auch keine weiteren
                Zustimmungsfenstern
                für eine Zuslassung der Cookies. Das wird auch in ihrer
              </div>
            </div>
          </div>
          <div class="footer--bottom fb">
            <div class="fb--text">
              Deine Webseite - All Rights Reserved
            </div>
          </div>
        </div>
    </footer>
  </div>
</body>

</html>

Answer 1

尝试使用 CSS

附加图片

backgroung:"url(img-path);"
background-size: "cover";
background-repeat: "no-repeat";

然后获取图像的父级 class 并添加此 css

    opacity: 0.4;

Answer 2

尝试查看 mix-blend-mode。我相信您正在寻找的是“差异”模式，但我建议您在线查看 documentation/explanations 以便您可以衡量它对您的项目的适合程度并探索您可以做什么。

Answer 3

您可以尝试这样做：

.back {
  width: 150px;
  height: 150px;
  background-color: lightblue;
}

.text {
  position: absolute;
  width: 300px;
  top: 20px;
  left: 30px;
  font-size: 26px;
  color: lightblue;
  mix-blend-mode: screen;
}

<div class = 'back'></div>
<div class = 'text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod blandit sem, nec lobortis eros.</div>

如何更改块外文本的颜色？ JS/CSS

How to change the color of the text that goes outside the block? JS/CSS

html

javascript

css

text

effect