`
zhangyaochun
  • 浏览: 2614904 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css3的多背景图片

    博客分类:
  • css3
阅读更多

举例

 

 

div.test {
	background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
	background-repeat: repeat-y;
	background-position: top left, top right;
	width: 385px;
	height: 100px;
	border: 1px solid #000;
}
 

效果图

 


注意

 

   background-repeat  只有一个值,这个值控制所有的背景图

 

 

 

 

浏览器支持情况

 

 

  • FF 3.6(beta 2) +
  • Chrome 1.0.154 +
  • Safari 3.2.1+
    更多可以参考 http://caniuse.com/


扩展阅读:

 

2、关于css3的background-size 可以参考 http://zhangyaochun.iteye.com/blog/1345074

 

  • 大小: 29.9 KB
0
2
分享到:
评论

相关推荐

    css代码添加背景图片常用代码

    ### CSS 添加背景图片常用代码详解 #### 一、颜色设置:`background-color` **语法**: ```css {background-color: 颜色值;} ``` **说明**: 通过此属性可以为元素设置背景颜色。颜色值可以是预定义的颜色名称、...

    CSS3鼠标hover背景图片缩放动画效果

    **CSS3鼠标hover背景图片缩放动画效果**是现代网页设计中一种常见的交互技术,它通过CSS3的特性实现背景图片在鼠标悬停时产生平滑的缩放效果,为用户带来更丰富的视觉体验和更直观的交互反馈。在本案例中,当用户将...

    CSS3全屏背景图片缩小渐变自动切换代码

    在本文中,我们将深入探讨如何使用CSS3来创建一个全屏背景图片的缩小渐变自动切换特效。这个特效是纯CSS实现的,不依赖任何JavaScript代码,为网站增添了一种优雅且动态的视觉体验。 首先,我们需要理解CSS3中的...

    css3实现一个div设置多张背景图片及background-image属性实例演示

    本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置,并介绍CSS3中的背景渐变。 首先,我们来看一下`background-image`属性的基本语法。它接受一个或多个 `<bg-image>` 值,每个值可以是 `none...

    css3半透明遮罩背景lightbox图片展示特效

    在“css3半透明遮罩背景lightbox图片展示特效”中,我们主要关注的是如何使用CSS3来创建具有半透明遮罩和动态效果的图片展示组件,通常被称为Lightbox。Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会...

    jQuery和CSS3简单的背景图片3D视觉差特效

    "jQuery和CSS3简单的背景图片3D视觉差特效"是一个巧妙地结合了这两项技术,为网页增添动态、立体感的背景效果。这个特效利用了人眼对近处物体运动感知更敏锐的生理特性,即所谓的"视觉差",来创造出一种深度感和动感...

    【css背景图片自适应】css怎么设置背景图片自适应大小

    在css中,可以利用“background-size”属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加“background-size:cover;”样式,即可使背景图片的大小自适应。

    css3马赛克样式图片切换

    2. **背景图片与伪元素**:另一种方法是使用`::before`或`::after`伪元素,并设置`background-image`属性,通过CSS3的`background-size`控制每个马赛克单元的图片大小,`background-position`调整图片的位置,以及`...

    CSS3模糊背景图片透明遮罩动画特效

    【CSS3模糊背景图片透明遮罩动画特效】是一种在网页设计中常见的视觉表现手法,它通过结合CSS3的多种特性,创造出引人入胜的用户体验。这个特效主要由以下几个核心知识点构成: 1. **CSS3滤镜(Filter)**:模糊...

    css3背景图片指定显示位置

    - 在CSS3中,可以使用逗号分隔多个背景图片,每个图片都可以有自己的`background-position`。例如: ```css background-image: url(img1.png), url(img2.png); background-position: left top, right bottom; `...

    css3背景图片页面滚动视差效果

    在网页设计中,CSS3(层叠样式表第三版)为开发者带来了许多创新特性,其中“背景图片页面滚动视差效果”是近年来颇受欢迎的一种视觉表现手法。这种效果通过精心设计,使得背景图像在页面滚动时以不同的速度移动,...

    jquery+css3实现图片动态背景

    3. **CSS3 动画**:`@keyframes` 规则用于定义自定义动画,结合 `animation` 属性应用到元素上,可以使背景图片进行平滑过渡或循环播放特定动作。 4. **CSS3 过渡(Transition)**:通过 `transition` 属性,可以在...

    CSS3全屏背景图片缩小渐变代码.zip

    【标题】"CSS3全屏背景图片缩小渐变代码.zip" 涉及的主要知识点是CSS3中的背景图像处理和过渡效果。在网页设计中,全屏背景图片是一种常见的视觉表现手法,它可以让网站看起来更加大气、专业。而通过CSS3,我们可以...

    css3给背景图片加颜色遮罩的方法

    前段时间在开发中,遇到需要给背景层加颜色遮罩的项目,现在特定总结一下给背景图层加颜色遮罩的方法。 方法一:通过定位叠加(注意层级) <div class=inner> .wrap1 { position: relative; width: 1200px; ...

    CSS3 做出iPhoneX手机屏幕背景和页面背景图片同时切换特效.zip

    本项目“CSS3做出iPhoneX手机屏幕背景和页面背景图片同时切换特效”聚焦于利用CSS3特性来实现一个特定的交互效果,即当用户滚动页面时,iPhoneX的屏幕背景与页面背景图片能够同步变化,营造出更加动态和引人入胜的...

    css背景颜色透明背景图片切换效果

    在本主题中,“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果,即当用户交互时,网页背景颜色逐渐变为透明,并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性,常被...

    一个很好的CSS工具,可以下载CSS中的背景图片

    标题中的“一个很好的CSS工具,可以下载CSS中的背景图片”指的是一个专门针对CSS(层叠样式表)设计的实用工具,它能够帮助开发者或设计师提取并下载网页中CSS样式所引用的背景图片。这个工具可能简化了从CSS代码中...

    纯CSS3全屏背景图片幻灯片轮播.zip

    HTMLl + CSS3全屏背景图片幻灯片轮播, 不限照片数量, 具有四种形式的播放效果 HTMLl + CSS3全屏背景图片幻灯片轮播, 不限照片数量, 具有四种形式的播放效果 HTMLl + CSS3全屏背景图片幻灯片轮播, 不限照片数量, 具有...

    CSS3实现图片全屏背景特效

    3. `background-position`: 用于设定背景图片的位置。默认值是`center`,但我们可以根据需要调整,比如居左、居右或居中: ```css body { background-position: center; } ``` 4. `background-repeat`: 防止...

    CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效

    在本文中,我们将深入探讨如何使用CSS3实现一个精美的鼠标悬停图片半透明渐变颜色背景遮罩动画特效。这个特效在用户将鼠标指针悬停在图片上时,会在图片上方添加一层带有渐变颜色的遮罩,当鼠标移开时,遮罩会以平滑...

Global site tag (gtag.js) - Google Analytics