css3背景(一)背景图片、颜色渐变、多重背景图

background-image:设置或检索对象的背景图像

background-repeat:设置或检索对象的背景图像如何铺排填充

background-attachment:设置或检索对象的背景图像是随对象内容滚动还是固定的

background-origin:设置或检索对象的背景图像显示的原点

background-clip:检索或设置对象的背景向外裁剪的区域

background-size:检索或设置对象的背景图像的尺寸大小

Multiple background:检索或设置对象的多重背景图像

前三个是原属性被css3修改,后面四个是新增加的css3属性。

一、background-image

1)使用绝对或相对地址指定背景图像

描述:设置对象背景的图片,请设置一种与背景图片颜色相似的背景颜色,这样的话,假如背景图像不可用,或者加载过慢,页面也可获得良好的视觉效果。

实例

body
  { 
  background-image: url(bgimage.gif); background-color: #000000; }

背景图片

css3背景图片

提示:默认地情况下,背景图像位于元素的左上角,并在水平和垂直方向上重复。

 

代码示例:

<html>

<head>

<style type=”text/css”>

body {

background-image:url(bgimage.gif);

background-color: #000;

}

</style>

</head>

<body></body>

</html>

2)使用渐变绘制背景图像

渐变类型: linear-gradient(线性渐变), radial-gradient(径向(放射性)渐变), repeating-linear-gradient(重复的线性渐变), repeating-radial-gradient(重复的径向(放射性)渐变)

提示:IE8及更早浏览器不支持CSS3 background-image,即不支持多背景和使用渐变作为背景图像。

<linear-gradient>语法:

<linear-gradient>:linear-gradient([ <point>,] <color-stop>[, <color-stop>]+);

<point>:[ left | right ][ top | bottom ] || <angle>

<color-stop>:<color> [ <length> | <percentage> ]

<point>

left:设置左边为渐变起点的横坐标值。

right:设置右边为渐变起点的横坐标值。

top:设置顶部为渐变起点的纵坐标值。

bottom:设置底部为渐变起点的纵坐标值。

<angle>:用角度值指定渐变的方向(或角度)。

<color-stop>:指定渐变的起止颜色。

<color-stop>

<color>:指定颜色。

<length>:用长度值指定起止色位置。不允许负值

<percentage>:用百分比指定起止色位置。

 

以上的渐变可以用下面的几种方法实现:

linear-gradient(#fff,#333);

linear-gradient(top,#fff,#333);

linear-gradient(bottom,#333,#fff);

linear-gradient(-90deg,#fff,#333);

代码示例:

<!DOCTYPE html>

<html lang=”zh-cn”>

<head>

<meta charset=”utf-8″ />

<title>CSS linear-gradient()_CSS3</title>

<style>

div{width:200px;height:100px;margin-top:10px;border:1px solid #ddd;}

.test{background:-moz-linear-gradient(#fff,#333);background:-webkit-gradient(linear,center top,center bottom,from(#fff),to(#333));background:-webkit-linear-gradient(#fff,#333);background:-o-linear-gradient(#fff,#333);background:-ms-linear-gradient(#fff,#333);background:linear-gradient(#fff,#333);}

</style>

</head>

<body>

<div class=”test”></div>

</body>

</html>

 

background:linear-gradient(#000,#f00 50%,#090);

 

background: linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);

 

background: linear-gradient(45deg,#000,#f00 50%,#090);

<radial-gradient>语法: 

radial-gradient([ <position>,][ [ <shape> || <size> ] | <shape-size>{2},]<color-stop>[, <color-stop>]+);

示例:

 

以上的渐变可以用下面的几种方法实现:

radial-gradient(circle,#f00,#ff0,#080);

radial-gradient(center,circle,#f00,#ff0,#080);

radial-gradient(50%,circle,#f00,#ff0,#080);

radial-gradient(circle,#f00 0%,#ff0 50%,#080 100%);

radial-gradient(circle cover,#f00,#ff0,#080);

3)多重背景图

CSS3 允许您为元素使用多个背景图像,多重背景图可以是url()或gradient的混合方式

为 body 元素设置两幅背景图片:

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

原图片:

css3css3

设置两张背景演示:

 

代码示例:

<!DOCTYPE html>

<html lang=”zh-cn”>

<head>

<meta charset=”utf-8″ />

<title>CSS background-image_CSS3</title>

<style>

.test strong{font-size:16px;}

.test .url p{padding-top:200px;background-image:url(1.jpg);background-repeat:no-repeat;}

.test .gradient p{height:100px;background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));background-image:-o-linear-gradient(top , #45B5DA, #0382AD);}

.test .multiple p{padding-top:200px;background-image:url(1.jpg),url(2.jpg),url(3.jpg);background-repeat:no-repeat;background-position:0 0,100px 0,200px 0;}

</style>

</head>

<body>

<ul class=”test”>

<li class=”url”>

<strong>使用url()引入背景图像</strong>

<p>使用url()可以是绝对或相对路径</p>

</li>

<li class=”gradient”>

<strong>使用渐变绘制背景图像</strong>

<p>渐变种类有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient</p>

</li>

<li class=”multiple”>

<strong>多重背景图</strong>

<p>多重背景图可以是url()或gradient的混合方式</p>

</li>

</ul>

</body>

</html>

点赞

发表评论

: 北京pk10开奖结果 北京pk10开奖官网 北京赛车开奖历史 北京pk10历史开奖记录 北京赛车pk10开奖记录 北京赛车pk10开奖结果 北京pk10历史开奖记录 北京赛车pk10开奖记录 北京赛车pk10开奖结果 pk10开奖记录 pk10开奖结果 北京赛车开奖历史 北京赛车开奖记录 北京赛车开奖结果 北京pk10历史开奖记录 江苏快三开奖结果 江苏快三走势图表 江苏快三遗漏 江苏快三开奖结果走势 北京赛车pk10开奖记录 北京赛车pk10开奖结果 北京pk10历史开奖记录 秒速赛车开奖记录 秒速赛车历史记录 秒速赛车开奖结果 秒速赛车开奖直播 北京pk10历史开奖记录 北京赛车pk10开奖记录 北京赛车pk10开奖结果 pk10开奖记录 pk10开奖结果 北京赛车开奖历史 北京赛车开奖记录 北京赛车开奖结果 北京pk10历史开奖记录 江苏快三开奖结果 江苏快三走势图表 江苏快三遗漏 江苏快三开奖结果走势 北京赛车pk10开奖结果 北京赛车pk10开奖记录 北京pk10历史开奖记录 秒速赛车开奖结果 秒速赛车开奖记录 秒速赛车历史记录 秒速赛车开奖直播 秒速飞艇开奖记录 秒速飞艇历史记录 秒速飞艇开奖结果 秒速飞艇开奖直播 澳门百家乐 澳门百家乐网址 澳门百家乐官方网站 百家乐官网 澳门网上百家乐 一肖中特免费公开资料 白小姐中特网 香港马会资料大全 澳门百家乐 澳门百家乐网址 澳门百家乐官方网站 百家乐官网 澳门网上百家乐 pc蛋蛋预测 pc蛋蛋幸运28 北京赛车开奖结果 北京赛车开奖记录 pk10开奖结果 澳门百家乐 澳门百家乐网址 澳门百家乐官方网站 百家乐官网 澳门网上百家乐 一肖中特免费公开资料 白小姐中特网 香港马会资料大全 北京赛车开奖结果 北京赛车开奖记录 北京赛车历史记录 北京赛车开奖 幸运飞艇开奖记录 幸运飞艇历史记录 幸运飞艇开奖结果 幸运飞艇开奖直播