CSS 방사형 그래디언트를 SVG 방사형 그래디언트로

CSS http://codepen.io/A973C/pen/hnEaf(신호등의 빛을 의미함)와 같이 SVG에서 방사형 그래디언트를 만들 수 있습니까?red{Background:red;Background-image :radial- 그라데이션(갈색,투명);배경 크기:15px15px;너비:100px;높이:100px;테두리-r

P粉308783585 2023-12-11 15:54:09 0  2  643

CSS 배경 그라데이션이 전체 페이지(스크롤 가능한 콘텐츠 포함)를 덮지 않습니다.

HTML 문서의 CSS 배경 그라데이션에 문제가 있습니다. 선형 그래디언트를 배경으로 사용하고 본문 요소에 설정하는 페이지를 디자인했습니다. 내가 직면한 문제는 스크롤할 콘텐츠가 더 많음에도 불구하고 화면이 처음 끝나는 곳에서 그라데이션이 끝나는 것처럼 보인다는 것입니다. 따라서 아래로 스크롤하면 그라디언트의 두 번째 인스턴스가 처음부터 다시 시작되는 것처럼 보입니다. 이것은 나의 현재 CSS(SCSS) 코드입니다: @importurl('https://fonts.googleapis.com/css2?family=Poppins:wg

P粉506963842 2023-09-12 13:20:09 0  2  717

javascript - echarts 히스토그램 그라데이션 색상 문제

echarts 히스토그램은 그라데이션 색상 효과를 얻을 수 있지만 다음과 같은 그라데이션 색상 효과를 얻을 수 있습니까? 답변해 주세요. 즉, 대각선 그라데이션 색상

三叔 2017-06-12 09:30:45 0  1  964

스크롤 가능한 그라데이션 채팅 풍선

다음 예와 같이 아래 그라데이션으로 스크롤할 때 변경되는 그라데이션이 있는 채팅 거품의 흰색 컨테이너를 원합니다. 루트의 배경이 표시되도록 chatBubble 뒤의 .container 부분을 투명하게 만들려고 했습니다. .root{배경색:선형 그라데이션(빨간색, 노란색);너비:100vw;높이:100vh;}.컨테이너{너비:100%;높이:

P粉197639753 2023-09-01 11:52:18 0  2  680

테두리 그라디언트는 border-radius와 호환됩니까?

둥근 테두리(테두리 반경)로 입력 상자의 스타일을 지정하고 테두리에 그라데이션 효과를 추가하려고 합니다. 그라데이션과 둥근 테두리를 성공적으로 만들 수 있지만 동시에 둘 다 만들 수는 없습니다. 둥근 모서리가 있지만 그라데이션이 없거나, 그라데이션이 있지만 둥근 모서리가 없습니다. -webkit-border-radius:5px;-webkit-border-image:-webkit-gradient(선형,00,0100%,from(#b0bbc4),to(#ce

P粉824889650 2023-08-21 20:39:38 0  2  516

CSS를 사용하여 그라데이션 애니메이션을 만드는 방법

여러 색상이 포함된 그라디언트를 부드럽게 이동하고 싶은데 애니메이션이 매끄럽지 않은 것이 문제입니다. 매 단계마다 위치가 변경됩니다. <스타일>.animated{폭:300px;높이:300px;border:1pxsolidblack;animation:gra5sinfinite;animation-direction:reverse;-webkit-animation:gra5sinfinite;-web

P粉909476457 2023-09-18 09:47:10 0  2  768

CSS3 전환으로 그라데이션 배경 강화

CSS를 사용하여 축소판 이미지에 전환을 적용하여 마우스를 올리면 배경이 페이드인되도록 하려고 합니다. 변환이 작동하지 않지만 rgba() 값으로 변경하면 훌륭하게 작동합니다. 그래디언트를 지원하지 않나요? 또한 이미지를 사용해 보았는데 이미지도 변환되지 않습니다. 다른 게시물에서 누군가가 그렇게 했기 때문에 이것이 가능하다는 것을 알고 있지만 정확히 어떻게 하는지는 모르겠습니다. 어떤 도움이라도 > 사용할 수 있는 CSS는 다음과 같습니다: #containerdiva{-webkit-transition:backgrou

P粉955063662 2023-10-12 18:05:11 0  2  651

그라데이션 배경과 함께 CSS3 전환 사용

CSS를 사용하여 축소판 이미지에 전환을 적용하여 마우스를 올리면 배경이 페이드인되도록 하려고 합니다. 변환이 작동하지 않지만 rgba() 값으로 변경하면 제대로 작동합니다. 그라디언트를 지원하지 않나요? 또한 이미지를 사용해 보았는데 이미지도 변환되지 않습니다. 다른 게시물에서 누군가가 그랬기 때문에 이것이 가능하다는 것을 알고 있지만 정확히 어떻게 하는지는 모르겠습니다. 어떤 도움이라도 > 사용할 수 있는 CSS는 다음과 같습니다: #containerdiva{-webkit-transition:Background0.

P粉217629009 2023-08-23 21:25:42 0  2  666

밝은/어두운 테마의 변수에서는 선형 그래디언트가 작동하지 않습니다.

저는 개인 웹사이트(https://cooperativedoilylivedistro.elliott23.repl.co)를 작업 중입니다. 이 웹사이트에는 선호도에 따라 밝은 테마와 어두운 테마가 있습니다. 문제는 선형 그래디언트를 변수로 설정하면 작동하지 않고 전체 배경이 흰색으로 변한다는 것입니다. 이것이 바로 HTML, CSS, JS입니다. 무슨 일이 일어나고 있는지 알고 싶다면 브라우저에서 웹사이트를 확인하세요. <!DOCTYPEhtml><htmllang="ko"&

P粉190443691 2024-03-29 13:28:10 0  1  371

그라데이션이 있는 테두리 이미지에 테두리 반경을 사용할 수 있나요?

원형 테두리(테두리 반경)가 있는 입력 필드를 디자인하고 해당 테두리에 그라데이션을 추가하려고 합니다. 그라데이션과 원형 테두리를 성공적으로 만들 수 있지만 둘 다 함께 사용할 수는 없습니다. 그라디언트가 없는 둥근 모서리이거나 그라디언트가 있지만 둥근 모서리가 없는 테두리입니다. -webkit-border-radius:5px;-webkit-border-image:-webkit-gradient(선형,00,0100%,from(#b0bbc4),to(#ced9de))

P粉633733146 2023-08-29 12:52:01 0  2  577

한 가지 색상으로 그려진 텍스트에서 애니메이션 그라데이션으로 부드럽게 전환하는 것이 가능합니까?

페이지에 흰색 텍스트가 있고 그 아래에 버튼이 있습니다. 또한 애니메이션 그라데이션이 적용되어 텍스트를 채웁니다. 버튼을 클릭하면 -webkit-text-fill-color 속성이 투명해지며 텍스트 색상이 그라데이션에 맞게 갑자기 변경됩니다. 이렇습니다: https://codepen.io/hvyjhqnt-the-vuer/pen/poQdaLQ 흰색에서 그라데이션으로 부드럽게 전환하는 것이 가능합니까? (-webkit-text-fill-color 속성은 transiti를 직접 지원하지 않습니다.

P粉762447363 2023-09-16 09:22:05 0  1  833

점점 가늘어지는 그라디언트 애니메이션의 부드러운 색상 전환을 달성하는 방법은 무엇입니까?

점점 가늘어지는 그라디언트에 애니메이션을 적용하고 있지만 색상 변경이 충분히 부드럽지 않습니다. 다양한 기사를 살펴봤지만 올바르게 재현할 수 없습니다. 여기에서 내 코드를 찾을 수 있습니다: <style>body{min-height:100vh;display: 플렉스 ;align-items:center;justify-content:center;}.pyramid{폭:500px;높이:500px;배경-이미지:coni

P粉285587590 2023-09-01 16:37:22 0  1  528

SVG 경로에 그라디언트를 추가할 수 있습니까?

내 웹사이트에 스크립트에 의해 실행되는 간단한 로딩 표시기를 추가하고 싶습니다. 사용자가 기다리는 동안 그라데이션과 회전이 포함된 간단한 호여야 합니다. 아직 애니메이션 부분을 시도하지 않았지만 지금은 정적 스타일이 붙어 있습니다. 이것이 내가 지금까지 얻은 것입니다: <svgversion="1.1"baseProfile="full"xmlns="http://www.w3.org/2000/svg"width=&quo

P粉402806175 2023-10-18 14:55:02 0  2  662

javascript - vue-echarts-v3 사용시 꺾은선형 차트 영역에 그라데이션 색상이 적용됩니다.

이것은 내 차트 데이터입니다. 빨간색 부분을 그라데이션 색상으로 지정하고 싶습니다. visvisualMap 메서드를 사용했지만 원하는 효과를 얻을 수 없습니다. new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ {code...} 프로젝트에 너무 많은 리소스를 도입하고 싶지 않기 때문에...

我想大声告诉你 2017-05-16 13:36:11 0  2  1612

제목은 다음과 같이 다시 작성됩니다. Vue에 인라인 스타일을 추가하기 위한 CSS 변수

구성 요소에서 CSS 변수를 사용하고 setup() setup(props){constprogressBar=PositionService.getProgressBar(props.position);constprogressWidth=`${progressBar}%`;에서 계산된 데이터를 기반으로 div의 너비를 설정합니다. .. return{...,progressWidth};} 그런 다음 이 변수를 CSS 변수로 사용합니다. &엘

P粉421119778 2023-12-31 12:51:41 0  1  524

다시 작성된 제목은 HTML에서 그라데이션 배경으로 자동 채우기 슬라이더를 만드는 방법입니다.

저는 HTML을 가지고 놀면서 그라데이션으로 스스로 채워지는 슬라이더를 만들고 싶지만 이것이 거의 불가능하다고 생각합니다. 몇 시간 동안 조사했지만 답을 찾을 수 없는 것 같습니다. JS가 필요하다고 생각하지만 거기에는 완전히 공백이 있습니다. .slidecontainer{justify-content:center;bottom:0px;margin-left:auto;}.slider{-webkit-appearance:none;appearance:none;borde

P粉715228019 2024-02-03 20:57:38 0  2  513

이미지 가장자리에서 그라데이션 효과가 페이드 아웃되지 않는 이유는 무엇입니까?

이미지의 가장자리가 흐릿해지거나 최소한 희미해지기를 원합니다. 내가 시도한 것은 아무것도 작동하지 않으며 Stackoverflow에 대한 모든 질문을 살펴보았습니다. 저는 Sass가 아닌 CSS를 사용하고 있습니다. 문제를 복잡하게 만들기 위해 페이지에 배경 이미지를 두고 불투명도가 0.8인 흰색 마스크로 덮었습니다. 누구든지 도와주실 수 있나요? 제 코드펜입니다. .screen{위치:상대적;너비:100vw;높이:100vh;disp

P粉317679342 2023-09-09 23:34:16 0  1  563

SCSS를 사용하여 기본값 및 CSS 변수 생성

웹사이트 스타일링을 구현하고 있습니다. 레거시 지원상의 이유로 적어도 한동안은 IE11을 지원해야 합니다. 작업 흐름과 제정신의 이유로 가능할 때마다 CSS 변수를 사용하고 싶습니다. 나는 이 솔루션을 조사한 결과 작동하는 것을 생성하지만 사용하기에는 다소 장황합니다. 내 목표는 CSS 변수로 즉시 덮어쓰여지는 하드코딩된 값으로 끝나는 것입니다. 이렇게 하면 모든 사람을 위한 기본 테마를 추가하고 CSS 변수를 지원하는 브라우저에 대해 다른 테마(예: 어두운 모드)를 추가할 수 있습니다. 분명히 이 모든 것을 직접 작성할 필요는 없...

P粉295616170 2024-04-06 17:46:54 0  1  614

CSS 색상 변수에 투명도를 적용하는 방법은 무엇입니까?

CSS 변수에 액세스할 수 있도록 Electron을 사용하여 앱을 디자인하고 있습니다. vars.css에 색상 변수가 정의되어 있습니다: :root{--color:#f0f0f0;} 이 색상을 main.css에 사용하고 싶지만 약간의 불투명도가 적용되어 있습니다: #element{Background:(somehowusevar( --color) atsomeopacity);} 어떻게 해야 하나요? 전처리기를 사용하지 않고 CSS만 사용합니다. 나는 전체를 선호한다

P粉573809727 2023-10-13 15:48:04 0  1  693

CSS 표시 속성의 그라데이션 효과

저는 현재 CSS "슈퍼 드롭다운"을 디자인하고 있습니다. 기본적으로 일반 순수 CSS 드롭다운이지만 그 안에 다양한 유형의 콘텐츠가 있습니다. 현재 CSS3 전환 효과는 "display" 속성에 적용되지 않는 것 같습니다. 즉, display:none에서 display:block(또는 임의의 조합)으로 전환할 수 있는 방법이 없습니다. 위의 예에서 누군가 최상위 메뉴 항목 위로 마우스를 가져갈 때 두 번째 수준 메뉴가 "페이드 인"되도록 하는 방법이 있습니까? visible: ...

P粉608647033 2023-08-21 11:08:32 0  2  605