CSS图像样式总结篇

CSS图像样式总结篇

一、颜色(background-color)

CSS提供了属性background-color来设置背景的颜色。

可以使用以下3种方式来设置背景颜色
1、使用关键字形式进行设置举例:

background-color:red;

2、使用十六进制形式进行设置举例:

background-color:#000000;

3、使用RGB形式进行设置举例:

background-color:RGB(255,0,0);

也可以省略color,直接使用background设置背景颜色:

background:#000000;

二、图片(background-image)

CSS提供属性background-image来设置背景图片。

可以用以下方式来设置图片:

background-image:url(图片路径);

也可以省略image,直接使用background设置背景图片:

background:url(图片路径);

此处路径可以使绝对路径或者是相对路径。

三、排布(bakground-repeat)

CSS提供属性bakground-repeat属性来设置背景图片的排布方式,在默认情况下如果图片的面积没有标签元素的面积大,则背景图片会在横向以及纵向不满整个标签元素。

可以用以下方式来设置背景图片的排列方式:

background-repeat:方式

也可以省略repeat,直接使用background设置背景图片:

background:方式;

其中方式的值可以是:

  • repeat-x:水平方向重复
  • repeat-y:垂直方向重复
  • repeat:整个页面重复
  • no-repeat:不重复

示例代码:

可点击此链接查看结果:图片排布示例

四、位置控制(background-position)

CSS提供属性background-position来设置背景图片的位置,该属性可以控制背景图片在纵向坐标和横向坐标方向上的位置,在默认情况下该属性的值是(left,top)。

表4.1 background-position属性的设置列表

描述
top left;top center;top right;center left;center center;center right;bottom left;bottom center;bottom right;如果仅规定了一个关键词,那么第二个值将是"center"。
x% y%第一个值是水平位置,第二个值是垂直位置。左上角是0% 0%,右下角是100%,100%。如果仅规定了一个值,另一个值将是 50%。
xpos ypos第一个值是水平位置, 第二个值是垂直位置。左上角是0,0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值,另一个值将是50%。

示例代码:

可点击此链接查看结果:位置控制示例

五、滚动控制(background-attachment)

CSS提供了属性background-attachment来设置背景图片是都随着滚动条一起滚动

可以用以下方式来设置背景图片的滚动方式:

background-attachment:滚动方式;

也可以省略attachment,直接使用background设置背景图片:

background:滚动方式;

滚动方式的值可以使:

  • fixed:不随滚动条滚动
  • scrolled:随滚动条滚动
  • inherit:继承于父节点

示例代码:

可点击此链接查看结果:滚动控制示例

六、渐变

实现背景的渐变可以通过为背景添加颜色渐变的图片,也可以使用浏览器的功能来为背景添加渐变的颜色。

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

CSS3 定义了两种类型的渐变(gradients):

1.线性渐变(Linear Gradients)
向上/向下/向左/向右/对角方向
2.径向渐变(Radial Gradients)
由他们的中心定义

可以用以下方式来设置渐变:
1、线性渐变:

background:linear-gradient(direction, color-stop1, color-stop2,...);

不同浏览器实现方式又有不同,参考以下示例
示例代码:(从上到下渐变)

注意:Internet Explorer 9 及之前的版本不支持渐变。

示例代码:(从左到右渐变)

示例代码:(从左上角到右下角渐变)

如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度,逆时针方向计算(如图)。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。


示例代码:

2、使用透明度(transparent)
CSS3 渐变也支持透明度(transparent),可用于创建减弱变淡的效果。
透明度:0 表示完全透明,1 表示完全不透明。

background:linear-gradient(direction,rgba(255,0,0,0), rgba(255,0,0,1));

示例代码:

3、重复的线性渐变

示例代码:

4、径向渐变
径向渐变由它的中心定义。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

background: radial-gradient(center, shape, size, start-color, ..., last-color);

示例代码:(形状)

示例代码:(颜色分布)

size 参数定义了渐变的大小。它可以是以下四个值:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
    示例代码:(不同尺寸大小)

5、重复的径向渐变

七、边框

对于img标签来说,也具有border属性,它的CSS属性有

属性描述
border-left,border-right,border-top,border-bottom分别设置边框的四条边的样式
border-color设置边框颜色
border-width设置边框宽度
border-type设置边框风格,dashed表示虚线边框,solid表示实线边框,dotted表示点式边框

示例代码:

八、缩放

对img标签元素来说,CSS为img提供width和height属性来设置图片的宽度以及高度,当width和height的值设置为和原图等比例倍数的大小,该图片会被放大或缩小。

九、透明效果

CSS3提供了opacity来进行图片的透明度设置,其效果是仿佛给图片加了一层薄膜,让人看上去有一种透明感,透明效果也被成为遮罩效果。
例如,如果想设置透明度减少一半,可以设置如下:

opacity:0.5

opacity的值是一个小数,其取值范围是0~1,表示全透明以及不透明。在不同浏览器有不同的设置方法。
IE6和IE7提供滤镜的方法来设置该效果,它通过filter属性来达到(取值范围为0~100)。

filter:alpha(opacity=50);

IE8:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

旧版火狐浏览器通过此方式设置,新版直接使用opacity

-moz-opacity:0.5;

新版Safari、Chrome通过此方式设置

-khtml-opacity:0.5;

旧版Safari、Chrome通过此方式设置

webkit-opacity:0.5;

十、图片布局

CSS提供属性text-align以及vertical-align来控制图片的位置。
text-align用来控制图片的水平位置,vertical-align用来控制图片的垂直位置。

  • text-align:主要由3个值,依次是:left、center和right。
  • vertical-align:主要由baseline、bottom、middle、sub、super、text-bottom、text-top和top。
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复