css 如何更改文本颜色时,文本超出本节?[已关闭]

7gyucuyw  于 2022-12-27  发布在  其他
关注(0)|答案(3)|浏览(133)

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
59分钟前就关门了。
Improve this question
如何改变文本颜色时,文本超出本节?我已经尝试了"过滤器:invert(1)"CSS但不工作。这是我的代码https://codepen.io/ambaliya_0/pen/xxJwQJjhttps://i.stack.imgur.com/DlBiT.png)](https://i.stack.imgur.com/DlBiT.png

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

svmlkihl1#

尝试使用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 class="box"></section>

<section class="box2">
  <div class="dfd"></div>
  <div class="sd">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>
66bbxpm5

66bbxpm52#

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:

首先,给你想要改变文本颜色的部分一个id属性,这样你就可以用你的CSS来定位它。
x一个一个一个一个x一个一个二个x

m1m5dgzv

m1m5dgzv3#

1.在HTML文件中,将要更改其文本颜色的元素 Package 在容器元素(如div)中。
1.在CSS文件中,定义容器元素的样式,将其子元素的文本颜色设置为所需的颜色:
.容器{颜色:蓝色; }
1.在JavaScript文件中,定义一个函数,该函数将根据元素相对于节的位置更改元素的文本颜色:

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

1.调用changeTextColor()函数并传入元素和节作为参数:
改变文本颜色(文档.获取元素按标识(“我的元素”),文档.获取元素按标识(“我的部分”));

相关问题