您现在的位置是:首页 > 学无止境 > CSS3|Html5
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;
}
背景图片
提示:默认地情况下,背景图像位于元素的左上角,并在水平和垂直方向上重复。
代码示例:
<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); }
原图片:
设置两张背景演示:
代码示例:
<!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>
相关文章
文章评论
本栏推荐
- 十条设计原则教你学会如何设计网页布局!30...
网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...
- 用js+css3来写一个手机栏目导航30...
有些站长说想做一个手机适应的网站,但是导航太难了,如果要使用框架的话,代码非常多,冗余.再用dreamwear打...
- 6条网页设计配色原则,让你秒变配色高手30...
网页设计好不好看,颜色是毋庸置疑要排首位的,所以关于颜色的搭配技巧以及原则,对于每一个要学习web前端设...
- 三步实现滚动条触动css动画效果30...
现在很多网站都有这种效果,我就整理了一下,分享出来。利用滚动条来实现动画效果,ScrollReveal.js 用于...
- 使用CSS3制作文字、图片倒影30...
CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safa...
- 有创意的鼠标悬停效果集锦30...
分享一些用css3技术,三维、伪元素实现一些有创意的悬停效果
点击排行
- CSS3 Animation 实现对象从右到左渐变的css3动画效果30...
CSS3中的Animation与HTML5中的Canvas绘制动画不同。Animation只应用在页面上已存在的DOM元素上,而且他跟...
- 使用CSS3制作文字、图片倒影30...
CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safa...
- css3背景(一)背景图片、颜色渐变、多重背景图30...
background-image:设置或检索对象的背景图像background-repeat:设置或检索对象的背景图像如何铺排填充b...
- 关于响应式Web设计技巧以及入门30...
html5和css3流行至今,我在做响应式的网站一直是在“尝试”的阶段。并没有深入的去研究和学习,浅显的理解...
- 【分享】css3侧边栏导航不同方向划出效果30...
设定一组侧边栏导航菜单,然后可以从任何一边滑出。有两种实现方式,一种固定菜单,一种从左右两侧推出
- CSS3 伪类选择器 nth-child() 的用法30...
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特...
官方微信
