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

最新推荐文章于 2019-09-25 13:24:39 发布
最新推荐文章于 2019-09-25 13:24:39 发布
阅读量534 收藏 1
点赞数
分类专栏： WEB F-E
本文介绍了一种使用CSS设置背景图的方法，通过具体实例展示了如何为一个div元素精确配置背景图片的位置和重复方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

以下纯属个人经验，如有更好想法。。。。。（省略。。。1000字。。）

 

 

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

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

如上这张图，想取第一个输入的背景图，可以这样设置
<div style="width:25px;height:25px;
    background: #fff url(https://i-blog.csdnimg.cn/blog_migrate/65cf0e0b510a3956e4484e9aa2c78719.gif);
    background-repeat: repeat-x;
    background-position: -1px -1px"></div>

CSS如何实现背景图片（background-image）平铺，只有一张图？
jinzai9976的博客
04-01 2万+
CSS如何实现背景图片（background-image）平铺，只有一张图？ 前端-CSS 具体代码： background-image: url("xxx/xxx.jpg"); background-repeat: repeat-x; background-size: 100% 100%; background-repeat: repeat-x; 在x轴上进行叠铺 background-size: 100% 100%; 设置图片的大小 ...
CSS背景background详解，background-position详解
会敲代码的男老师的博客
02-03 3万+
背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。 css2 中的背景(background) 概述 CSS2 中有5个主要的背景(background)属性，它们是： * ba
项目总结设置元素的多个背景图和background的运用
时清云的博客
11-22 2627
其实我们在项目中经常遇到这种场景一个元素或者一行会有多个图标展示，之前我的做法就是每个图标用 span标签然后给它加一个背景或者是直接用img标签加载。不过css3新出了这样一个功能，就是一个元素可以设置多个背景图，而且可以分别给每个背景图设置大小和位置，这样的话就可以在一个元素里面设置任意位置，任意大小的背景图（有点夸张了）。 好了，前期介绍完了，开始用代码说话了 background 简写属性...
利用css的background-image和background-position将多图放在一张图片上取用
壁立千仞无欲则刚的博客
07-01 5041
将很多图标放在一张图片上，既方便管理，又不会出现有的图标加载比较慢，有的图标加载不到等情况。 1、html代码里面，比如要把图标放在一个span里，这样写： 2、然后将在css里这样写： .icon-class { background-image:url("Images/icon.png"); bac
关于使用background-position来控制图片的某部分展示到页面上方法
kingbow的博客
07-31 1759
1.background-position的值为两个数，其中分别是x和y的距离，表示一个html标签盒子中其中的某个位置（以当前html元素的左上角为原点，右边为x轴正向，下边为y轴正向） 2.一张背景图片默认是在html标签的左上角原点处开始展示的 3.此时我们需要把一张超级大图的一部分展示到html标签中时，我们需要测量出我们要取的那部分图的左边和上边距离我们的html标签盒子的左上方距离为多...
一键下载820张精选网页背景图片
- CSS提供了更为丰富的背景属性，可以设置背景图片、图片位置、重复方式、大小和固定背景等，例如使用`background-image`, `background-repeat`, `background-size`, `background-position`等属性。 - 为了提高...
"backgroundCover.image":"c:/Users/鲅鱼/Pictures/QQ图片20230518195458.png", // 图片绝对路径 "backgroundCover.style": { "opacity": 0.8, // 透明度(0.1-1) "background-size": "contain", // 填充模式(cover/contain) "background-position": "center" // 图片位置 } 预期为文件结尾。
最新发布
06-04
我们之前的回答中已经包含了"BackgroundCover"插件的基本配置，现在根据用户提供的引用内容，我们可以增加一些细节配置，例如：-透明度（opacity）-背景大小（background-size）-背景位置（background-position）-...
CSS背景图片批量下载工具
1. **手动方法**：开发者可以使用文本编辑器打开CSS文件，通过搜索background-image属性，手动提取图片URL。 2. **浏览器插件**：一些浏览器插件如“CSS Finder”或“CSS Image Extractor”可以在浏览器中直接解析...
jQuery实现图片背景特效的简单动画代码
通过JavaScript控制Div元素的CSS属性，如`background-size`（改变背景图片大小）、`background-position`（改变背景图片位置）等，可以达到视觉上的拉近和拉远效果。 6. 切换效果： 切换效果通常是指在两个或多个...
CSS技巧：自适应图片背景边框的实现方法
使用这种方法，无论容器的尺寸如何变化，背景图片都会按照`background-size`属性的设置进行调整，从而实现自适应效果。如果需要图片在容器中进行垂直或水平方向上的延伸，而不是总是居中，那么可以适当调整`...
css实现背景平铺效果的最佳方案
qq_32753509的博客
03-22 3955
background-size: cover; background-position: center;
网站CSS背景图片抓取工具
weixin_30570101的博客
03-25 604
工具介绍：　　1）分析网页，获取页面图片。　　2）分析网页引用CSS文件，获取背景图片。　　3）批量下载。要点：　　1）正则 　　　　LINK_PATTERN：获取页面所有连接 　　　　BACKGROUND_IMAGE_PATTERN：获取CSS中背景图片地址　　　　CHECK_URL_PATTERN：检测URL是否有效 代码 privateconsts...
css background之设置图片为背景技巧
zimufuzi的专栏
04-16 1948
Background是什么意思，翻译过来有背景意思。同意在css里面作为css属性一成员同样是有背景意思，并且设置背景图片、背景颜色、背景图片截取等样式。 首先先来看看background有那些值（可进入CSS手册的background详细了解） 可以按顺序设置如下属性（可点击进入相应的css手册查看使用）： background-color 背景颜色 background-ima
CSS3 background 分别设置多个背景图片
无名指的约定
08-24 4151
CSS3允许给box/div元素设置多个背景图片，只需要在原来的基础上加逗号分隔即可分别设置。 支持 Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ，Internet Explorer (9.0+) 等。 先上一个小例子，一只羊的png图片背景和草原的大背景 可以分别设置。效果如下： 代码如下：
css 设置图片背景平铺方式
ppwwp的专栏
09-12 6079
css设置背景图片平铺方式 repeat：沿水平竖直两个方向平铺，这也是默认值 no-repeat：不平铺，即只显示一次 repeat-x：只沿水平方向平铺 repeat-y：只沿竖直方向平铺 .headerh{ height: 8%; background:url("../public/images/33.jpg") repeat ...
使用background-position 定位背景图片 要注意优先级
z18596410的博客
08-15 1689
今天使用使用background-position 定位背景图片，修改定位坐标后，容器里的图片没有任何变化，弄了老半天，最后还是朋友提醒了我，”不生效无非就是类名有错··或者优先级不够“；真是一语惊醒梦中人啊！         因为我的背景图片和定位的样式是分开写的，为了共用，我把背景图片的引入写在了定位语句的后面，所以就有悲剧发生了，呵呵，我的悲剧希望能警醒新手。
background-position和雪碧图(CSS Sprites)用法
热门推荐
bingkingboy的博客
04-04 5万+
background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某些场景也常常会使用到这个属性，这次就总结下它的用法。       还是那句话，工欲善其事必先利其器，只
css3 background属性如何设置多张背景图
鹏仔工作室的秘密基地
09-25 2656
转载“共享博客” 原文http://www.sharedblog.cn/?post=122 Why？？？ 什么？可以设置多张背景图... 刚看到我是懵逼的，于是我查了下，css3确实可以设置多张背景图，方法分享给大家。 首先，关于background常用属性值介绍http://www.sharedblog.cn/?post=115 下面，css3实现一个盒子设置多张...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值