`
percy30856
  • 浏览: 134571 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类
最新评论

background-position 属性 使用一张背景图片就可以提取多张背景图的用法

 
阅读更多

以下纯属个人经验,如有更好想法。。。。。(省略。。。1000字。。)

 

 

这是从SINA博客上抠下来的图。。。

图片点击可在新窗口打开查看

如上这张图,想取第一个输入的背景图,可以这样设置
<div style="width:25px;height:25px;
    background: #fff url(http://simg.sinajs.cn/common/images/sinatopbar/090315_bg2.gif);
    background-repeat: repeat-x;
    background-position: -1px -1px"></div>

分享到:
评论

相关推荐

    CSS样式图片下载助手,css背景图片下载

    此外,还有其他相关属性,如`background-repeat`(控制图片是否重复显示)、`background-position`(设定图片的位置)和`background-size`(调整图片大小)等,用于控制背景图片的显示效果。 2. **CSS精灵图...

    CSS图片下载

    此外,CSS还支持雪碧图(CSS Sprites),这是一种将多个小图合并到一张大图中,然后通过`background-position`属性定位显示特定部分的方法。这样做可以减少HTTP请求,提高页面加载速度。下载时,需要注意到这些图片...

    css样式大全(精华版).docx

    本资源主要是前端 HTML 中 CSS 样式的一些相关使用记录,涵盖了 CSS 样式中的各个属性使用方式和使用方法,以下是从该资源中提取的相关知识点: 字体属性 在 CSS 中,字体属性是用来控制文本样式的,包括字体大小...

    css属性表,非常详细

    - **background-image**:使用图片作为背景。 - **background-repeat**:指定背景图像如何重复,选项包括`repeat`(默认)、`repeat-x`、`repeat-y`或`no-repeat`。 - **background-attachment**:背景图像是否固定...

    jquery插件ez-bg-resize背景自适应浏览器的大小.zip

    2. **设置CSS样式**:为了使背景图像有效应用,你需要在CSS中定义一个类,这个类将用于指定背景图像,并且可能需要设置一些基本属性,如`background-size`,`background-position`等,以达到预期的初始效果。...

    html特效代码大全

    在网页设计中,实现图片轮流显示(也称为幻灯片或轮播图)是一种常见的效果,用于展示多张图片或广告。虽然在现代网页开发中通常会使用JavaScript库如Swiper、Slick等,但在早期,这种效果往往通过HTML和简单的...

    下载css文件中包含的图片

    图片可以以背景图像、内容图像等形式存在于CSS中,通常使用`url()`函数来引用。例如: ```css background-image: url('path/to/image.jpg'); ``` 或者对于CSS Sprite技术,可能会有相对路径或绝对路径的引用: ``...

    html图片轮播代码

    - **对象封装**:使用构造函数`runImg()`创建对象,并通过`prototype`扩展属性和方法。 - **元素选择器**:自定义了 `$` 函数,用于根据ID获取DOM元素或创建新元素。 - **初始化**:`info` 方法初始化轮播图所需的...

    JQuery学习笔记

    - 例如,`background-image`设置背景图片,`background-position`设置图片位置,`background-repeat`设置图片是否重复显示。 **6. CSS选择器的应用** - 通过`#idname`选择特定ID的元素。 - 通过`.classname`选择...

    jQuery菜单插件AutoSprites.zip

    CSS Sprites是一种网页图片应用处理方式,将多个小图合并到一张大图上,通过CSS的background-position属性控制显示图片的部分。这样做的好处在于减少了HTTP请求次数,从而加快页面加载速度。AutoSprites插件正是基于...

    Cascading Style Sheet 2.0 中文手册

    2. **背景图像裁剪与平铺**:`background-size`和`background-repeat`属性分别用于调整背景图像的大小和重复方式。 **七、媒体查询** 尽管CSS2.0并未引入媒体查询,但这一特性在CSS3中成为响应式设计的关键。媒体...

    js上传图片取色器插件.zip

    结合图片的CSS样式(如`background-position`),可以计算出鼠标在原始图片上的坐标。一旦用户点击,就可获取到像素的颜色。 4. **颜色获取**:在JavaScript中,可以使用Canvas API来获取图片像素的颜色。首先,...

    仿谷歌主页js动画效果实现代码

    从给定文件的信息中,我们可以提取到关于如何使用JavaScript以及jQuery库来实现仿谷歌主页的动画效果的知识点。 首先,文件中提到的关键技术是JavaScript和jQuery。JavaScript是一种广泛应用于网页开发的脚本语言,...

    提取自百度有啊的css圆角效果

    4. `background:url()`属性设置背景图片的URL,`no-repeat`表示背景图片只显示一次,不重复。 5. 使用`overflow:hidden;`隐藏超出容器边界的背景图片部分,以完成圆角效果。 6. `.cc`类用于定义容器的主要内容区域...

    web前端开发知识点总结.docx编程资料

    - 多背景(`background-image`) - 圆角(`border-radius`) - 盒阴影(`box-shadow`) - **文字效果** - 文本阴影(`text-shadow`) - 文字溢出省略号(`text-overflow`) **2.3 响应式设计** - **媒体查询*...

    css课堂笔记

    - `top`, `right`, `bottom`, `left`: 在使用`position`属性时,这些属性可以用来精确控制元素的位置。 ### CSS链接状态 - `A:link`: 未访问过的链接。 - `A:visited`: 已访问过的链接。 - `A:hover`: 鼠标悬停时的...

    JavaScript.txt

    根据提供的文件信息,我们可以提取并总结出以下与JavaScript相关的知识点: ### 1. 禁用右键菜单 - **代码示例**: ```html oncontextmenu="window.event.returnValue=false" (false)"&gt;&lt;td&gt;no ``` - **解释**...

    jQuery实现的图片轮播效果完整示例

    在本文中,我们将会详细探讨如何使用jQuery库来实现图片轮播效果,这是一种常见的网页元素动态效果。通过结合时间函数,我们能够动态地改变页面上的元素样式,具体到图片轮播场景,这通常包括了图片的自动切换、控制...

Global site tag (gtag.js) - Google Analytics