How to change text color when text out side this section? I have tried "Filter : invert(1)" CSS but not working. This is my code https://codepen.io/ambaliya_0/pen/xxJwQJj (https://i.stack.imgur.com/DlBiT.png)](https://i.stack.imgur.com/DlBiT.png)

`https://codepen.io/ambaliya_0/pen/xxJwQJj

CodePudding user response：

Try to use mix-blend-mode: difference

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.box {
  background-color: #7c3131;
  width: 500px;
  height: 100px;
  margin: 50px auto;
  margin-bottom: 0px;
}

section.box2 {
  display: flex;
  align-items: flex-start;
  justity-content: center;
  width: 500px;
  margin: 0 auto;
  margin-top: -50px;
  height: max-content;
}

.dfd {
  width: 250px;
  height: 250px;
  min-height: 100%;
  background-color: red;
}

.sd {
  width: 250px;
  padding-inline: 1em;
  text-align: justify;
  color: rgba(255, 255, 255);
  mix-blend-mode: difference;
}

<section ></section>

<section >
  <div ></div>
  <div >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</section>

CodePudding user response：

To change the color of text that is outside a particular section of an HTML page, you can use CSS. Here's an example of how you can do this:

First, give the section you want to change the text color for an id attribute. This will allow you to target it with your CSS.

<section id="section-to-change-color">

Next, create a CSS rule that targets the id attribute you just created and sets the color property to the color you want. You can use a color name, a hex code, or an RGB value to specify the color.

<style>#section-to-change-color {color: red;}</style>

If you want to change the color of the text outside this section, you can create a separate CSS rule that targets the body element and sets the color property to the color you want.

<style>body {color: blue;}</style>

Note that the CSS rule targeting the body element will apply to all text on the page, so you may want to use a more specific selector to target only the text you want to change. You can also use classes or other attributes to target specific elements or groups of elements on the page.

For example, if you only want to change the color of the text inside p elements outside the section, you can use the following CSS rule:

<style>p {color: blue;}</style>

You can also use the :not pseudo-class to exclude elements from a particular CSS rule. For example, the following CSS rule will change the color of all p elements on the page except for those inside the section element with the id attribute of section-to-change-color:

<style>p:not(#section-to-change-color p){color: blue;}</style>

I hope this helps! Let me know if you have any questions.

CodePudding user response：

1. In your HTML file, wrap the element that you want to change the text color of in a container element, such as a div.

2. In your CSS file, define a style for the container element that sets the text color of its children to the desired color:

.container { color: blue; }

3. In your JavaScript file, define a function that will change the text color of the element based on its position relative to the section:

function changeTextColor(element, section) {  
 if (!element.contains(section)) {
   element.style.color = "red";   
 } else { 
   default color (blue in this example)
   element.style.color = "";   
 } 
}

4. Call the changeTextColor() function and pass in the element and the section as arguments:

changeTextColor(document.getElementById("myElement"), document.getElementById("mySection"));