집 > 기사 > 웹 프론트엔드 > CSS 지식 요약(7)

CSS 지식 요약(7)

WBOY원래의: 2016-08-15 16:49:471076검색

일반적인 CSS 스타일

5. 배경 스타일

　1)배경색

　배경색 : 투명 | 색상

공통값 : ①영문, ②Hex, ③RGB 또는 RGBA

게다가 그라데이션 컬러도 있어요

　그라디언트 색상(그라디언트)은 선형 그라데이션(선형)과 방사형 그라데이션(방사형)

으로 구분됩니다.

　선형 그라데이션: 배경: 선형-그라디언트(방향, 색상1, 색상2, ...);

첫 번째 매개변수가 생략되면 기본값은 "180deg"로, 이는 "아래로"에 해당합니다.

두 번째와 세 번째 매개변수는 색상의 시작점과 끝점을 나타내며, 여러 색상 값을 가질 수 있습니다. (색상 값 뒤에 백분율을 추가하여 해당 색상이 차지하는 전체 배경색 영역의 백분율을 나타낼 수 있습니다.)

소스 코드 예시:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.linear</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">linear-gradient(to right,red 30%,yellow)</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="linear"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　효과:

　방사형 그라데이션: 배경: 방사형 그라데이션(중심, 모양, 크기, 색상, 색상, ...);

그라디언트의 중심, 모양(프로토타입 또는 타원) 및 크기를 지정할 수 있습니다.

기본적으로 그라디언트의 중심은 중앙(중심점을 나타냄)이고 그라디언트의 모양은 타원(타원을 나타냄)이며 그라디언트의 크기는 가장 먼 모서리(가장 먼 점을 나타냄)입니다. 모서리).

소스 코드 예시:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.radial</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">radial-gradient(circle, red, yellow, green)</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="radial"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

효과:

2) 배경 이미지

　배경이미지 : 없음 | url(url)

소스 코드 예시:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.image</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">142px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">55px</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;">url(http://www.cnblogs.com/images/logo_small.gif)</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="image"</span><span style="color: #0000ff;">><span style="color: #000000;">后面的是背景</span></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　효과:

다음은 배경입니다

　3)배경 타일링 방법

　백그라운드-반복 : 반복 | 반복 없음 | 반복-y

예시 1(repeat-x) 소스코드:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.x</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;">url(http://www.cnblogs.com/images/logo_small.gif)</span>;<span style="color: #ff0000;">
    background-repeat</span>:<span style="color: #0000ff;">repeat-x</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="x"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

효과:

예시 2(반복-y) 소스 코드:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.y</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;">url(http://www.cnblogs.com/images/logo_small.gif)</span>;<span style="color: #ff0000;">
    background-repeat</span>:<span style="color: #0000ff;">repeat-y</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="y"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　효과:

　　4）背景定位

　　　　background-position : 左对齐方式上对齐方式

　　　　①background-position:left bottom;

　　　　②background-position:50% 50px;

　　例子源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.position</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;">url(http://www.cnblogs.com/images/logo_small.gif)</span>;<span style="color: #ff0000;">
    background-repeat</span>:<span style="color: #0000ff;">no-repeat</span>;<span style="color: #ff0000;">
    background-position</span>:<span style="color: #0000ff;">left bottom</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="position"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

　　6）背景原点

　　　　设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat，此属性才会生效。

　　　　background-origin : border-box | padding-box | content-box;

　　7）背景的显示区域

　　　　设定背景图像向外裁剪的区域。

　　　　background-clip : border-box | padding-box | content-box;

　　8）背景尺寸

　　　　设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

　　　　background-size : length | percentage | cover | contain;

　　　　length : 设置背景图像的高度和宽度。

　　　　percentage : 以父元素的百分比来设置背景图像的宽度和高度。

　　　　cover : 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；但是背景图像的某些部分也许无法显示在背景定位区域中。

　　　　contain : 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

　　例子源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.size1</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">142px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">55px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;">url(http://www.cnblogs.com/images/logo_small.gif)</span>;<span style="color: #ff0000;">
    background-repeat</span>:<span style="color: #0000ff;">no-repeat</span>;
}<span style="color: #800000;">
.size2</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">142px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">55px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background-image</span>:<span style="color: #0000ff;">url(http://www.cnblogs.com/images/logo_small.gif)</span>;<span style="color: #ff0000;">
    background-repeat</span>:<span style="color: #0000ff;">no-repeat</span>;<span style="color: #ff0000;">
    background-size</span>:<span style="color: #0000ff;">100px 30px</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    原大小：
    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="size1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    改变大小后：
    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="size2"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

原大小：

改变大小后：

　　9）背景样式缩写

　　　　background : 背景色背景图片背景平铺方式背景定位

　　例子源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.bg</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#ccc url(http://www.cnblogs.com/images/logo_small.gif) no-repeat center center</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bg"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

　　10）多重背景

　　　　一个元素可以设置多重背景图像，每组属性间使用逗号分隔。

　　　　多重背景图之间存在着重叠关系，前面的背景图会覆盖在后面的背景图之上。

　　　　background : background-image background-repeat background-attachment background-position/background-size

　　　　　　　　　　　background-origin background-clip background-color

　　　　background-image：指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”。

　　　　background-repeat：指定对象的背景图像如何铺排填充。

　　　　background-attachment：指定对象的背景图像是随对象内容滚动还是固定的。

　　　　background-position：指定对象的背景图像位置。

　　　　background-size：指定对象的背景图像的尺寸大小。

　　　　background-origin：指定对象的背景图像显示的原点。

　　　　background-clip：指定对象的背景图像向外裁剪的区域。

　　　　background-color：指定对象的背景颜色。

　　　　*注意：background-color只能设置一次，且由于写在前面的背景会叠在之后的背景之上，所以背景色通常都定义在最后一组上，避免背景色将图像盖住。

　　例子源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.bg2</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">200px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">url(http://www.cnblogs.com/images/logo_small.gif) no-repeat scroll 10px 20px/115px 52px content-box padding-box,<br>　　　　　　　　url(http://www.cnblogs.com/images/logo_small.gif)  no-repeat scroll 30px 40px/115px 52px content-box padding-box,<br>　　　　　　　　url(http://www.cnblogs.com/images/logo_small.gif)  no-repeat scroll 50px 60px/115px 52px content-box padding-box #ccc</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bg2"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：

성명：

이전 기사：타임스탬프를 기반으로 한 음력 날짜 계산다음 기사：타임스탬프를 기반으로 한 음력 날짜 계산

CSS 지식 요약(7)

일반적인 CSS 스타일

5. 배경 스타일

관련 기사