Question

我是css的首发，今天我完成了一项学校任务：

以下是此HTML代码：

<head>
    <meta charset="UTF-8">
    <title>ABC</title>
    <style>
        /* CSS part */
    </style>
</head>
<body>
    <p>ABC</p>
</body>

我的任务是着色＆＃34; A＆＃34;致＃ec407a的信＆＃34; B＆＃34;到＃ffb300 ＆＃34; C＆＃34;到＃26a69a而不更改html代码。

我该如何管理？谢谢你们！

Answer 1

严重的黑客攻击，但是你去了

<style>
p {
  color:#ffb300;
  position: relative;
}
  p:first-letter {
    color: #ec407a;
  }
  p::after {
    bottom: 0;
    color: #26a69a;
    content: 'C';
    position: absolute;
    transform: translate(-100%, 0);
  }
</style>
<body>
    <p>ABC</p>
</body>

https://jsfiddle.net/fqu9ppL4/1/

Answer 2

如果大多数浏览器都覆盖了mix-blend-mode，则可以执行此操作，但unfortunately尚未完成。

因此，对于未来，这可能是一种方式：

p {
  margin:1em;
  display:table;
  position:relative;
  background:white;/*
  or hudge white inset white shadow to cut off colors 
   box-shadow:inset 0 0 0 100px white; */
  }
  p+p {
  font-size:3em;
  font-family:'Courier New', Courier, modern, monospace;
  
}
p:before {
  content:'';
  background:linear-gradient(to left, #ec407a ,33.33%, #ffb300 33.33%,#ffb300 66.66%, #26a69a 66.66%);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  mix-blend-mode:screen;
}

<p>What about a few more letters ?</p>
<p>WIW</p>

还有

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

p {
  font-size:3em; /* demo purpose any size */
  display: table;
  background: linear-gradient(to left, #ec407a, 33.33%, #ffb300 33.33%, #ffb300 66.66%, #26a69a 66.66%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<p>ABC</p>

Answer 3

这可能是一种非常黑客风格的“解决方案”，仅适用于给定字体中的给定字符。

HttpHeaders headers = new HttpHeaders();
headers.setAccept(Arrays.asList(MediaType.APPLICATION_JSON));
headers.setContentType(MediaType.APPLICATION_JSON);
headers.add("Authorization", "Bearer <token id>");

p { 
  color: #ec407a;
  display: inline-block;
  font-size: 6em;
}
p:after {
  background-color: white;
  content: 'B';
  color: #ffb300;
  display: inline-block;
  float: right;
  position: relative;
  left: -1.33em;
}
p:before {
  content: 'C';
  color: #26a69a;
  display: inline-block;
  float: right;
  position: relative;
  left: -1.335em;
}

Answer 4

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ABC</title>
    <style>
        p::first-letter {
            color: #ec407a;
        }
    </style>

   <script type="text/javascript">
        var text = "ABC";
        var colors = new Array("#ec407a", "#ffb300", "#26a69a");
        for (var i = 0; i < text.length; i++)
    document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + text[i] + "</span>");
    </script>

</head>

<body>
    <p>ABC</p>
</body>

</html>

用css着色文本字母，无需更改HTML代码

4 个答案: