CSS를 사용하여 텍스트 필드의 단어를 다른 색상으로 만드는 방법-프런트엔드 Q&A-php.cn

CSS를 사용하여 텍스트 필드의 단어를 다른 색상으로 만드는 방법

青灯夜游

풀어 주다： 2022-09-02 18:19:41

원래의

2450명이 탐색했습니다.

구현 단계: 1. 선형-그라디언트()를 사용하여 텍스트 필드에 그라데이션 배경 효과를 추가합니다. 구문 "배경 이미지: 선형-그라디언트(...);" 2. 배경 클립 속성을 사용합니다. 및 색상 속성을 사용하여 그라데이션을 만듭니다. 배경색은 텍스트 필드의 텍스트에만 표시됩니다. 즉, 텍스트 그라데이션에는 다른 색상이 있으며 구문은 "배경-클립: 텍스트; 색상: 투명;"입니다.

CSS를 사용하여 텍스트 필드의 단어를 다른 색상으로 만드는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 텍스트 필드의 텍스트에 그라데이션 효과를 추가하여 다양한 텍스트 색상을 얻을 수 있습니다.

css3 텍스트 그라데이션 색상: 선형-그라디언트()+배경-클립

CSS에는 텍스트 그라데이션을 설정하는 직접적인 속성이 없습니다. 일반적으로 텍스트는 단색만 가능합니다. 하지만 배경 클리핑을 사용하면 텍스트 영역에 배경색이 나타나게 할 수 있습니다. 텍스트에 그라데이션이 있는 것 같습니다

Rendering

CSS를 사용하여 텍스트 필드의 단어를 다른 색상으로 만드는 방법

Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    textarea {
	        font-size: 20px;
        background-image: linear-gradient(to right, red, blue);
        background-clip: text;
        -webkit-background-clip: text;
	        color: transparent; /*需要文字透明*/
    }
    </style>
</head>

<body>
	   <textarea>为你定制 发现精彩</textarea>
</body>
</html>

로그인 후 복사

코드가 많지 않으니 분석해 보겠습니다. it Look:

background-image: Linear-gradient(to right, red, blue); 는 그라데이션 색상인 배경 이미지 값입니다. background-image: linear-gradient(to right, red, blue);是背景图取值为渐变色。

CSS를 사용하여 텍스트 필드의 단어를 다른 색상으로 만드는 방법

渐变效果是作用在背景上的，怎么让该效果作用在文字上？这就使用到background-clip 属性。因为它是一个新属性，有兼容问题，因此要加前缀

background-clip: text;
-webkit-background-clip: text;

로그인 후 복사

background-clip 属性规定背景的绘制区域

语法：background-clip: border-box|padding-box|content-box;

上面没有说取值 text 的情况，看到前面的前缀，大家应该也能想到，它的兼容性问题了，目前还不是能所有浏览器都支持。

取值为text的意思，就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

CSS를 사용하여 텍스트 필드의 단어를 다른 색상으로 만드는 방법

可以看到，有一点点的渐变，但不明显；这是因为文字本身也有颜色，有颜色的文字会覆盖在背景之上。所以，我们最后写color: transparent;

CSS를 사용하여 텍스트 필드의 단어를 다른 색상으로 만드는 방법 그라디언트 효과가 배경에 적용됩니다. 텍스트에 어떻게 적용하나요? 이것은 background-clip 속성을 사용합니다. 새로운 속성이고 호환성 문제가 있으므로 접두사를 붙여야 합니다.

rrreee

background-clip 속성은 배경의 그리기 영역을 지정합니다

구문: background-clip: border-box|padding- box|content-box ;🎜🎜 CSS를 사용하여 텍스트 필드의 단어를 다른 색상으로 만드는 방법

🎜🎜🎜값이 없습니다 위에서 언급한text, 이전 접두사를 보면 호환성 문제도 있다고 생각해야 하며 현재 모든 브라우저에서 지원되지는 않습니다. 🎜🎜text 값은 블록 안의 텍스트가 자르기 영역으로 사용되어 텍스트의 배경이 블록의 배경이 되고 텍스트 외부 영역이 잘려진다는 의미입니다. 잘립니다. 🎜🎜 CSS를 사용하여 텍스트 필드의 단어를 다른 색상으로 만드는 방법

🎜🎜예 보시다시피 약간의 그라데이션이 있지만 텍스트 자체에도 색상이 있고 색상이 있는 텍스트가 배경을 덮기 때문에 명확하지 않습니다. 따라서 최종적으로 color: transparent;를 작성하여 텍스트를 투명하게 만들면 텍스트 뒤의 배경색이 표시됩니다. 🎜🎜🎜🎜🎜 (학습 영상 공유: 🎜웹 프론트엔드🎜)🎜

위 내용은 CSS를 사용하여 텍스트 필드의 단어를 다른 색상으로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!