css3学习总结4--CSS3背景

  1. 云栖社区>
  2. 博客>
  3. 正文

css3学习总结4--CSS3背景

水车306 2015-07-06 15:02:00 浏览328
展开阅读全文

css3背景

  • 1. background-size
  • 2. background-origin
  • 3. background-clip

示例:

className
{
  background:url(bg_flower.gif);
  -moz-background-size:63px 100px; /* 老版本的 Firefox */
  background-size:63px 100px;
  background-repeat:no-repeat;
}

  你指定的大小是相对于父元素的宽度和高度的百分比的大小。

background-size两个参数可以设置成和原图像不一样大小的尺寸,不过那样背景图片就被拉伸了

background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域

示例:

.className{
   background:url(bg_flower.gif);
   background-repeat:no-repeat;
   background-size:100% 100%;
   -webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

多重背景图片

CSS3 允许您为元素使用多个背景图像。

实例:

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

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

background-clip 属性

标签定义及使用说明

JavaScript 语法:

object object.style.backgroundClip="content-box"

语法

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

 

说明
border-box 默认值。背景绘制在边框方框内(剪切成边框方框)。
padding-box 背景绘制在衬距方框内(剪切成衬距方框)。
content-box 背景绘制在内容方框内(剪切成内容方框)。

实例

规定背景的绘制区域:

.className
{
background-color:yellow;
background-clip:content-box;
}

总结:

属性 描述 CSS
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

网友评论

登录后评论
0/500
评论
水车306
+ 关注