`
747017186
  • 浏览: 331547 次
社区版块
存档分类
最新评论

多张背景图片定位,定大小同时显示

    博客分类:
  • html
 
阅读更多

一个DIV可以显示多少个背景图片,在以前答案是肯定的,只能显示一个。但是在CSS3的出现改变了这一现状,可以显示多个背景图片。不管可以显示多个,就连这个背景的在什么位置显示(定位),以及显示的大小都可以设置。下面我们来看个例子:

<div id="canvas"></div>

 

$('#canvas').css("background","url('../ViewImage.do?resLibID=7&entityID=23350&abc="+Math.random()+"') 0px 0px / 950px 23px no-repeat,url('../ViewImage.do?resLibID=7&entityID=23350&abc="+Math.random()+"') 0px 78px / 950px 46px no-repeat");

下面我们来分析这个例子:

记住如果你要插入多张图片可以用background-image,以为CSS3中已经提供了,但是你如果要同事指定位置避免重复,那就必须使用background了,这个要记住。

url那个只是图片的路径,后面的 0px 0px 那是图片的开始绘画点在div的坐标位置(一般div在左上角为坐标原点),接着就是图片的大小,图片的坐标位置与图片的大小必须用“/”隔开,950px 23px 这样就定了图片的大小。后面的no-repeat只是确保图片是不重复的。

这只是第一张图片,第二张图片用逗号隔开,重复第一张图片的步骤。

是不是很简单,找了好久才发现的。呵呵..

分享到:
评论

相关推荐

    QT好看的背景图片,PYQT界面设计

    5. **响应式设计**:考虑界面在不同分辨率和设备上的表现,可以使用QResizeEvent来监听窗口大小变化,动态调整背景图片的缩放或定位。 6. **图标和资源**:PYQT支持使用QIcon和QResource来管理和显示图标,这对于...

    背景图片 | | bg.rar

    在IT行业中,背景图片是一种非常重要的视觉元素,广泛应用于网页设计、移动应用界面、桌面壁纸、广告设计等多个领域。这个名为"bg.rar"的压缩包文件显然包含了100个精心挑选并具有高清质量的背景图片,对于设计师和...

    CSS 多图片融合背景定位的应用于优缺点分析

    这里我们将详细探讨标题和描述中提到的三种定位方式:关键字、像素和百分比,并分析它们在多图片融合背景定位中的应用及其优缺点。 1. 关键字定位: 使用关键字如`background-position: top right;`,这种定位方式...

    背景自动切换css模板

    通过巧妙运用CSS3的特性,如动画(@keyframes)、过渡(transition)和背景定位(background-position),开发者能够实现背景图片的平滑过渡、淡入淡出等多种切换效果。 【标签】:“网页模版” “网页模版”指的...

    css sprites图片背景优化技术

    1. 图片合并:首先,你需要将网页中所有的小图标或背景图片整合到一张大图中。这一步通常在设计阶段完成,通过图像编辑工具如Photoshop或者在线工具实现。 2. CSS定位:然后,为每个原本应单独显示的小图片创建一个...

    会动的时钟(有背景图片及音乐)

    这个“会动的时钟”项目,不仅实现了时间的实时显示,还融入了背景图片和音乐元素,为用户提供了一种视觉与听觉相结合的全新体验。对于初学者来说,这是一个很好的实践项目,能够帮助他们掌握GUI编程的基本技巧,并...

    css 图片圆角边框的效果

    5. **控制背景尺寸**:使用`background-size`属性,我们可以调整背景图片的大小以适应元素的边框。这一步对于确保圆角正确显示至关重要。例如,如果我们想让图片宽度和高度都等于边框宽度,可以这样设置: ```css ...

    点击左右按钮滚动一个图片展示

    - `#seckill_slider`:滑块容器,宽度设置为10000px以容纳多张图片。 - `#seckill_slider li`:每一张图片的容器,宽度固定为233px,高度为411px,并设置一定的间距。 3. **图片信息展示**: - `.info_box`:...

    win32鼠标定位器

    它的主要功能是实时监控并显示鼠标的当前位置,同时提供当前鼠标所指向窗口的相关信息,如窗口的大小等。这个小程序对于开发者调试界面或者进行系统级的测试非常有用,因为它可以直观地展示出鼠标的动态行为。 在...

    纯css3模拟单张图片切角固定效果.zip

    【标题】:“纯css3模拟单张图片切角固定效果”是利用CSS3中的linear-gradient属性来实现一种独特的视觉效果,它可以将一张图片的角落进行切割,呈现出非传统的边角形状,同时保持其他部分的正常显示。这个技术在...

    给工具栏添加图像背景

    为工具栏添加图像背景可以使整个界面更加生动和吸引人,同时也可以帮助用户更好地识别和区分不同的功能区域。 1. **设计原则**:在添加图像背景时,需要遵循一定的设计原则。例如,背景图像应与应用的整体风格保持...

    jquery层叠图片横向平滑移动轮播切换效果

    每个图片都应具有隐藏和显示状态,并初始状态下只显示第一张。 2. 利用CSS对图片进行定位和样式设置,确保它们在容器内层叠排列,横向平铺。 3. 编写jQuery脚本,初始化轮播状态,例如设置初始索引、自动轮播计时...

    css sprites技术将多个背景集成到一个png图片上css定位

    它将多个小图片合并到一张大图(通常为PNG格式)上,然后通过CSS的`background-image`属性设置这张大图,并利用`background-position`来定位显示其中的某个小图片。 实现CSS Sprites的基本步骤如下: 1. **整合...

    CSS实现网页背景图片自适应全屏的方法

    这样的CSS设置,可以让背景图片自适应屏幕大小,无论用户使用的是大屏显示器还是小屏幕设备,背景图片都能完美铺满屏幕且保持比例,不会随页面滚动而滚动。同时,最小宽度设置确保了在小屏幕设备上图片的清晰度,...

    上传图片加水印(图片水印和文字水印)

    1. **图片水印**:图片水印可以是公司标志、设计师签名等,它以较低的透明度融入图片背景,不影响主要视觉元素的同时,起到标识作用。在编程实现中,可以通过图像处理库如Python的PIL (Pillow) 或Java的ImageMagick...

    鼠标右键背景修改器,将你的右键背景换成美女图片

    3.接下来“右击2057-替换资源-弹出‘替换位图于’对话框-点击‘打开新位图文件按钮’-弹出‘打开’对话框-定位找到你喜欢的bmp格式图片(大小任意,最好不要太大,以免右键图片显示不全,但一定要是24位bmp格式...

    易语言源码易语言卷帘式菜单加背景图片源码.rar

    在这个“易语言源码易语言卷帘式菜单加背景图片源码.rar”压缩包中,包含了一个使用易语言实现的卷帘式菜单功能,并且增加了背景图片的显示,这为用户界面增添了一定的美观性。 卷帘式菜单是一种常见的用户界面元素...

    js图片轮播特效

    2. 图片列表:包含所有待展示的图片,这些图片可以是同一个位置的不同图片源,或者通过CSS背景定位来展示同一张图片的不同部分。 3. 控制按钮:用户可以通过这些按钮来手动切换图片。 4. 自动播放功能:设置定时器...

    用VC++实现带背景图的实时动态曲线

    在绘图区域内绘制初始曲线,同时确保曲线覆盖在背景图片之上。 - **步骤3:数据更新与曲线刷新** 当有新的数据点加入时,通过将当前曲线整体向左平移一个像素来为新数据点腾出空间,并在最右侧绘制新数据点。 - *...

    CSS3 照片墙 图片随机排列效果.rar

    8. **背景图像与相对定位**:有时,为了避免在图片尺寸不一时出现空白,可以将图片作为容器的背景,使用`background-size`属性设置合适的填充模式。同时,通过相对定位 (`position: relative`) 和绝对定位 (`...

Global site tag (gtag.js) - Google Analytics