찾다

집  >  기사  >  웹 프론트엔드  >  CSS3에서 배경을 그라디언트 색상으로 설정하는 방법

CSS3에서 배경을 그라디언트 색상으로 설정하는 방법

青灯夜游
青灯夜游원래의
2021-12-15 14:00:4813499검색

설정 방법: 1. "배경:선형-그라디언트(그라디언트 방향, 색상 1, 색상 2,..)" 명령문을 사용합니다. 2. "배경:방사형-그라디언트(모양 크기 위치, 시작 색상,. .) , 색상 종료);" 명령문.

CSS3에서 배경을 그라디언트 색상으로 설정하는 방법

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

Gradient

CSS3 그라디언트는 둘 이상의 지정된 색상 사이의 부드러운 전환을 표시할 수 있습니다. 그라디언트 이미지를 사용하는 것에 비해 그라디언트는 다운로드 시간과 대역폭 사용량을 줄이고 확대할 때 더 보기 좋습니다.

Line Gradient

색상 값은 암시적 직선을 따라 점차적으로 전환됩니다. linear-gradient()에 의해 생성됩니다. linear-gradient() 产生。

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

语法

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )

  • <angle></angle>：用角度值指定渐变的方向（或角度）。角度顺时针增加。

    CSS3에서 배경을 그라디언트 색상으로 설정하는 방법

  • <side-or-corner></side-or-corner>：描述渐变线的起始点位置。to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度 和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
  • <color-stop-list></color-stop-list>：颜色变化列表。支持透明度（rgba(255,0,0,0.1)）。

示例：背景色线性渐变--background-image+linear-gradient()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--线性渐变</title>
		<style>
			.demo{
				width:500 ;
				height: 300;
				margin: 50px auto;
			}
			.demo *{
				width: 200px;
				height: 200px;
				margin: 20px;
				text-align: center;
				line-height: 200px;
				color: #fff;
				font-size: 16px;
				float: left;
			}
			.demo1{
				/* 底色 */
				background-color: #fd0d0d;
				/* chrome 2+, safari 4+; multiple color stops */
				background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));
				/* chrome 10+, safari 5.1+ */
				background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* firefox; multiple color stops */
				background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);
				/* ie 6+ */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;, endColorstr=&#39;#d89e3c&#39;);
				/* ie8 + */
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;, endColorstr=&#39;#d89e3c&#39;)";
				/* ie10 */
				background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* opera 11.1 */
				background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* 标准写法 */
				background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);

			}
			.demo2{
				/* 底色 */
				background-color:#d41a1a;
				/* chrome 2+, safari 4+; multiple color stops */
				background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));
				/* chrome 10+, safari 5.1+ */
				background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
				/* firefox; multiple color stops */
				background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
				/* ie10 */
				background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);
				/* opera 11.1 */
				background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);
				/* 标准写法 */
				background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">基本线性渐变--自上而下</div>
		    <div class="demo2">基本线性渐变--45度角</div>
		</div>
	</body>
</html>

CSS3에서 배경을 그라디언트 색상으로 설정하는 방법

径向渐变

radial-gradient() CSS 函数创建了一个图像，该图像的颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。

同样至少需要定义两种颜色节点，也可以指定渐变的中心（默认在中心点，center）、形状（默认椭圆形 ellipse）、大小（默认 farthest-corner，表示到最远的角落）

语法

radial-gradient(
  [shape size at position] ?
  <color-stop-list> [ , <color-stop-list> ]+
)
  • shape：椭圆形（ellipse，默认）或圆形（circle）
  • size：
    • closest-side， 渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
    • closest-corner， 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
    • farthest-side， 与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
    • farthest-corner， 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

  • position：可以是具体的两个位置偏移值（10% 20%），也可以是关键字（left、right、top、bottom）

示例：背景色径向渐变--background-image+radial-gradient()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--径向渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
			}
			.demo *{
				width:200px ;
				height:200px;
				margin: 50px 15px;
				float: left;
			}
			.demo1{
				background-image: -moz-radial-gradient(#ecff05, red);
				background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */
				background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */
				background-image: radial-gradient(#ecff05, red);
			}
			.demo2{
				background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
				background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);
				background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

CSS3에서 배경을 그라디언트 색상으로 설정하는 방법

重复渐变

重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient()

선형 그래디언트를 생성하려면 최소 두 개의 색상 노드를 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 시작점과 방향(또는 각도)도 설정할 수 있습니다. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--重复渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
			}
			.demo *{
				width:200px ;
				height:200px;
				margin: 50px 15px;
				float: left;
			}
			.demo1{
				    background: repeating-linear-gradient(
				    to top left,
				    lightpink,
				    lightpink 5px,
				    white 5px,
				    white 10px
				  );
			}
			.demo2{
				   background: repeating-radial-gradient(
				    powderblue,
				    powderblue 8px,
				    white 8px,
				    white 16px
				  );
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

SyntaxCSS3에서 배경을 그라디언트 색상으로 설정하는 방법

rrreee

  • <angle></angle>: 각도 값을 사용하여 그라데이션의 방향(또는 각도)을 지정합니다. 각도는 시계방향으로 증가합니다. CSS3에서 배경을 그라디언트 색상으로 설정하는 방법

  • : 그라데이션 선의 시작점 위치를 설명합니다. 위로, 아래로, 왼쪽으로 및 오른쪽으로 값이 각도 0도, 180도, 270도 및 90도. 나머지 값은 상단 중앙을 기준으로 시계방향 각도로 변환됩니다. 그라데이션 선의 끝점은 시작점의 중심과 대칭입니다.
  • <color-stop-list></color-stop-list>: 색상 변경 목록입니다. 투명성을 지원합니다(rgba(255,0,0,0.1)).
🎜🎜예: 배경색 선형 그라데이션-- background-image+linear-gradient()🎜🎜rrreee🎜CSS3에서 배경을 그라디언트 색상으로 설정하는 방법🎜

🎜방사형 그라데이션🎜🎜🎜방사형 -gradient() CSS 함수는 색상 값이 중심점(원점)에서 바깥쪽으로 확산되고 점차적으로 다른 색상 값으로 전환되는 이미지를 생성합니다. 🎜🎜또한 두 개 이상의 색상 노드를 정의해야 하며 그라디언트의 중심(기본값은 중심점, center), 모양(기본 타원 타원), 크기(기본 <code>가장 먼 모서리, 가장 먼 모서리를 나타냄) 🎜🎜🎜Syntax🎜🎜rrreee
  • 모양: 타원(타원 code>, 기본값) 또는 원형(원)
  • 크기:
    • 가장 가까운 쪽 , 그라디언트의 가장자리 모양은 그라디언트의 중심점(원)에 가장 가까운 컨테이너 측면에 접하거나 적어도 그라디언트의 중심점에 가장 가까운 수직 및 수평 측면(타원)에 접합니다. ).
    • 가장 가까운 모서리, 그래디언트의 가장자리 모양은 그래디언트의 중심점에 가장 가까운 컨테이너의 모서리와 교차합니다.
    • 가장 먼 쪽, 가장 가까운 쪽과 달리 가장자리 모양은 그라디언트의 중심점에서 가장 먼 컨테이너 쪽(또는 가장 먼 수직 및 수평)에 접합니다. 측면).
    • 가장 먼 모서리, 그라디언트의 가장자리 모양은 그라디언트의 중심점에서 가장 먼 컨테이너의 모서리와 교차합니다.
  • 🎜position: 두 개의 특정 위치 오프셋 값일 수 있습니다 ​​(10% 20%) 또는 키워드 가능(왼쪽, 오른쪽, 위쪽, 아래쪽)🎜
🎜🎜예: 배경색 방사형 그라데이션--배경-이미지+방사형-그라디언트()🎜🎜rrreee🎜CSS3에서 배경을 그라디언트 색상으로 설정하는 방법🎜

🎜Repeat Gradient🎜🎜🎜지정된 요소를 채울 만큼 그라디언트 패턴을 여러 번 반복합니다. repeating-linear-gradient() 및 repeating-radial-gradient() 함수에 의해 생성됩니다. 🎜🎜반복 기능의 매개변수는 그라디언트 길이(마지막 색상 스케일과 첫 번째 색상 스케일 사이의 거리)의 배수를 기반으로 반복한다는 점을 제외하면 위와 동일합니다. 🎜rrreee🎜🎜🎜🎜 (동영상 공유 학습: 🎜css 동영상 튜토리얼🎜)🎜

위 내용은 CSS3에서 배경을 그라디언트 색상으로 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css css3 position background
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3에서 클릭시 div를 숨기는 방법다음 기사：CSS3에서 클릭시 div를 숨기는 방법

관련 기사

더보기