CSSの知識まとめ(7)

一般的な CSS スタイル

5. 背景スタイル

1)背景色

背景色 : 透明色

共通の値: ①英単語、②16進数、③RGBまたはRGBA

さらに、グラデーションカラーもあります

グラデーションカラー(gradient)はlinear gradient(linear)とradial gradient(radial)

に分かれます

線形グラデーション:背景:linear-gradient(direction, color1, color2, ...);

最初のパラメータを省略した場合、デフォルトは「180deg」で、これは「下まで」に相当します。

2番目と3番目のパラメータは色の開始点と終了点を表し、複数の色の値を持つことができます。 (色の値の後にパーセンテージを追加して、この色が占める背景色領域全体のパーセンテージを示すことができます)

ソースコード例:

リーリー

リーリー

効果:

放射状グラデーション: 背景: 放射状グラデーション(中心、形状、サイズ、色、色、...);

グラデーションの中心、形状（プロトタイプまたは楕円）、サイズを指定できます。

デフォルトでは、グラデーションの中心は center (中心点を表す)、グラデーションの形状は ellipse (楕円を表す)、グラデーションのサイズは farthest-corner (最も遠い角を表す) です。

ソースコード例:

リーリー

リーリー

効果:

2)背景画像

背景画像 : none (url)

ソースコード例:

リーリー

リーリー

効果:

後ろにあるのは背景です

3)背景のタイリング方法

background-repeat : リピートなしリピート-x |

例1（repeat-x） ソースコード：

リーリー

リーリー

効果:

例2（repeat-y） ソースコード：

リーリー

リーリー

効果:

 

 　　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>

　　效果：