• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css3中background新增的4个新的相关属性用法介绍

css3中background新增的4个新的相关属性用法介绍

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含background,css3等相关知识,佚名 希望在学习及工作中可以帮助到您
关于background属性用法,相信许多重构人员都很熟悉了,在css3中,background属性依然保持以前的用法,不过可以允许在该属性中添加多个背景图像组,背景图像之间通过逗号进行分隔。增加了4个新的相关属性。

background-clip 指定背景的显示范围

background-origin 指定绘制背景图像的起点

background-size 指定背景图片的尺寸的大小

background-break 指定内联元素的背景图像进行平铺时的循环方式

background-clip

目前webkit引擎的safari和chrome浏览器支持,mozilla Gecko引擎 和Presto引擎(opera11.0以上)和trident引擎(ie9以上)都支持这个属性,但是版本低的可能需要带上各自的私有属性,

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

background-clip 属性用来判断背景是否包含边框区域,一般默认的background-color是从元素的边框的左上角起到右下角为止,而backround-image却不一样,从padding边缘的左上角到border右下角边缘为止;用background-clip控制背景色和背景图片的显示区域,解决以上默认的问题,

border-box:从边框区域向外裁剪背景;

padding-box:从补白区域向外裁剪背景;

content-box:从内容区域向外裁剪背景

no-clip:从边框区域向外裁剪背景

您可能想查找下面的文章:

  • css background 背景图的设置方法
  • CSS background全部汇总
  • CSS的background属性及CSS3的背景图片设置总结
  • 使用CSS3来实现滚动视差效果的教程
  • background-size使用详解
  • CSS3属性background-size使用指南
  • CSS背景background、background-position使用详解
  • CSS background 控制显示图片的一部分
  • css中background-size属性使用介绍
  • css3中背景尺寸background-size详解

相关文章

  • 2017-08-06css 背景半透明最佳实践
  • 2017-08-06div 垂直居中的多种方法详细介绍
  • 2017-08-06实例讲解CSS3中的box-flex弹性盒属性布局
  • 2017-08-06纯CSS无hacks的跨游览器自适应高度多列布局 推荐
  • 2017-08-06JS+CSS实现侧边栏跟随浏览器滚动效果
  • 2017-08-06CSS3中的content属性使用示例
  • 2017-08-06让IE6支持兼容min-width、max-width CSS样式属性的方法
  • 2017-08-06CSS表格样式:圆角,隔行,变色的具体实现
  • 2017-08-06IE7 设置z-index的覆盖问题的解决方法
  • 2017-08-26css组合选择器、伪选择器

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css3的过滤效果简单实例
    • IE下使用form时所在行被撑高的解决方法
    • css 超出用省略号当标题字符溢出用省略号表示
    • CSS文字控制之letter-spacing和word-spacing
    • 纯CSS实现鼠标移动切换图片示例
    • 你应该知道的30个css选择器
    • CSS属性探秘系列(二):overflow及相关属性text-overflow
    • 滚动视差效果background-attachment实战记录
    • 20个CSS/CSS3常用样式汇总
    • css3弹性盒模型(Flexbox)详细介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有