您现在的位置是：网站首页> 编程资料编程资料

CSS3之多背景background使用示例CSS3实现多背景模拟动态边框的效果CSS3点击按钮实现背景渐变动画效果CSS3条纹背景制作的实战攻略使用CSS3实现多列布局与多背景的技巧用CSS3实现背景渐变的方法css3中背景尺寸background-size详解使用CSS3的背景渐变Text Gradient 创建文字颜色渐变多重CSS背景动画实现方法示例CSS3之背景尺寸Background-size使用介绍css3背景_动力节点Java学院整理

2021-09-07 963人已围观

简介 CSS3之多背景background和CSS2的使用方法一样，只不过图片可以从1个图片变成多个图片了，其在CSS3的项目中运用比较广泛，大家有更好的案例要积极分享哟

CSS3中新加了多背景这个属性，和CSS2的使用方法一样，只不过图片可以从1个图片变成多个图片了。在CSS3中多背景的使用是非常常见的，所以，这个多背景的属性应用很普遍的，所以掌握CSS3之多背景background是当务之急呀。

一、background的语法

1、background的分写

复制代码

代码如下:

background-image: [background-image], [background-image], [background-image];
background-position: [background-position], [background-position], [background-position];
background-repeat: [background-repeat], [background-repeat], [background-repeat];

2、background的简写

复制代码

代码如下:

background: [background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat];

二、background的兼容情况

三、background的实例

1、圆角效果

CSS代码：

复制代码

代码如下:

.a {width:300px;}
.b {background:url("http://www.leemagnum.com/img/left.jpg") no-repeat left top,
url("http://www.leemagnum.com/img/right.jpg") no-repeat right top;padding:0 10px;}
.b div {background:url("http://www.leemagnum.com/img/mid.jpg") repeat-x left top;height:48px;}

HTML代码：

复制代码

代码如下:

梦龙小站

预览效果：

2、多背景图片

CSS代码：

复制代码

代码如下:

div {width:300px;height:80px;border:1px solid #000;
background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat,
url("http://www.leemagnum.com/img/a.jpg") no-repeat right -300px;
-webkit-transition:0.5s background-position ease;
}
div:hover {background-position:0 0,right 0;}

HTML代码：

复制代码

代码如下:

预览效果：

(1)默认状态

(2)hover状态

CSS3之多背景background就为大家介绍完了，希望能对大家有所帮助。CSS3之多背景background在CSS3的项目中运用比较广泛，大家有更好的案例要积极分享哟。

上一篇：css实现文字竖排效果示例代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

下一篇：纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示CSS自适应导航菜单的实例代码

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢