• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

css3 backgrounds

css3手册 薛 陈磊 688次浏览 已收录 0个评论 扫描二维码

css中背景是用的很多的一个样式,出现的也很早,CSS3包含几个新的背景属性,允许更好地控制背景元素,并且通常和background-sizebackground-originbackground-clip配合使用,下文会一一提到;

css3中的background最大的变化是允许通过background-image设置多个背景图像,不同的背景图像由逗号分隔,并且图像被堆叠在彼此的顶部,其中第一图像最接近观看者;

示例:

css3 backgrounds

看起来是个普通的背景,其实这里用的是两个背景图片重叠的效果,也就是黄色背景是张图片,右侧的花是一个图片,代码如下:

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

从代码可以看出css3设置的细则,两张图片背景和花,延伸方式右下和左上,一个不重复一个重复,并且这些样式可以合并写:

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    padding: 15px;
}

css3中的background也可以通过background-size设置背景的大小,这一点在之前的文字自适应页面中使用雪碧图也说过,通过设置background-size来设置背景图片大小,这里使用的是同一张图片:

css3 backgrounds

#example1 {
    border: 1px solid black;
    background:url(img_flwr.gif);
    background-repeat: no-repeat;
    padding:15px;
}

#example2 {
    border: 1px solid black;
    background:url(img_flwr.gif);
    Background-size: 100px 80px;
    background-repeat: no-repeat;
    padding:15px;
}

此外background-size还有两个属性contain和cover,contain将背景图像缩放为尽可能大(但其宽度和高度必须适合内容区域内),cover缩放背景图像,以便内容区域完全被背景图像覆盖(其宽度和高度都等于或超过内容区域),不过目前看来这两个用的比较少,国内网站几乎没见使用过;

CSS3中background-origin属性指定背景图像的位置,该属性可以设置三个不同的值:

  1. border-box,背景图像从边框的左上角开始;

  2. padding-box,(默认)背景图像从填充边缘的左上角开始;

  3. content,背景图像从内容的左上角开始;

background-origin示例:

css3 backgrounds

示例不仔细看差别并不大,因为这里的border和padding值设置的不大,要牢记background-origin定义才能理解这里的差别;

示例代码:

#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
}

#example2 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-Origin: border-box;
}

#example3 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-Origin: content-box;
}

CSS3 background-clip属性指定背景的绘制区域,和background-origin一样也有三个设置:

  1. border-box:(默认)背景被绘制到边框的外边缘;

  2. padding-box:背景填充到绘制的外边缘;

  3. content-box:背景填充内容区域;

css3 backgrounds

示例代码:

#example1 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
}

#example2 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    Background-Clip: padding-box;
}

#example3 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    Background-Clip: content-box;
}


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css3 backgrounds
喜欢 (0)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址