如何使用CSS为容器中的特定单词着色

debugcn 发表于 Dev

尼卡

假设我有一个容器：

 <div id="container"> This is a red apple </div>

如何用红色为单词“红色”上色？像（伪代码）之类的东西

#container:[word="red"]{
   color:red;
}

是否可以在不引入JavaScript或修改现有HTML的情况下在纯CSS中完成此操作？

农业资源管理系统

不是要证明观点，而是要回答您的问题-在没有JS的CSS中这是可能的：示例

简而言之：我们为文本颜色设置了黑色背景色，为特定的红色字符串设置了红色背景图片。我们使用删除原始文本填充-webkit-text-fill-color。使用剪切背景到文本轮廓-webkit-background-clip: text;，调整红色图像的大小并将其定位在我们要着色的任何文本字符串上。

请注意：我绝对不建议在任何在线网站上使用它。这仅在webkit中有效，因为它基于非标准的Wekbit特定CSS规则。颜色并没有真正绑定到彩色文本字符串上-它是完全静态的。

编辑：这是CSS：

#container {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 1.5em 1em;
    background-repeat: no-repeat;
    background-position: 3.4em 0;
    background-color: #000;
    background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oD/2Q==);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。