background-position相关内容

带偏移的CSS背景渐变

我将渐变作为背景图像应用到我的身体上。然后我使用background-position:0 255px;在顶部添加了255px的偏移量。 除了一个小问题外，它看起来相当不错：当然渐变不会在页面底部结束，而是在页面下方255px处结束。 是否有什么简单的方法可以让渐变在底部结束，但以偏移量从到开始？ http://jsfiddle.net/julian_weinert/ar6jC/ ..

发布时间：2022-03-24 14:20:11 css background-image gradient background-position 前端开发

多背景图片定位

我有三个背景图片，宽度均为 643 像素.我希望它们是这样排列的: 顶部图片(12px 高度)无重复 中间图片重复-y 底部图片(12px 高度)无重复 如果不让它们重叠，我似乎无法做到这一点(这是一个问题，因为图像是部分透明的)，这样的事情可能吗? 背景图片: url(top.png),网址(底部.png)，网址(中间.png)；背景重复:不重复，不重复，重复-y；背景 ..

发布时间：2022-01-08 13:24:27 css background background-image background-position 前端开发

在线性梯度上使用具有背景位置的百分比值

有没有办法让 background-position 取百分比值?目前，我的按钮仅适用于 width 和 background-position 的显式值. body {最小高度:100vh；显示:弯曲；弹性方向:列；justify-content:空间环绕；对齐项目:居中；}.按钮 {显示:弯曲；证明内容:中心；对齐项目:居中；文字装饰:无；白颜色;字体粗细:粗体；宽度:350 像素；高度 ..

发布时间：2022-01-08 12:30:07 css background background-image linear-gradients background-position 前端开发

CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用

我在移动 Safari 中遇到了背景位置问题.它适用于其他桌面浏览器，但不适用于 iPhone 或 iPad. body {背景色:#000000；背景图片: url('图片/background_top.png');背景重复:不重复；背景位置:居中顶部；溢出:自动；填充:0px；边距:0px；字体系列:“Arial"；}#header {宽度:1030px；高度:215px；左边距:自动；右边 ..

发布时间：2021-12-22 23:32:56 css mobile safari background-position 前端开发

在线性渐变上使用带有背景位置的百分比值

有没有办法让 background-position 取百分比值?目前，我的按钮仅适用于 width 和 background-position 的显式值. body {最小高度:100vh；显示:弹性；弹性方向:列；justify-content:空间环绕；对齐项目:居中；}.按钮 {显示:弹性；对齐内容:居中；对齐项目:居中；文字装饰:无；白颜色;字体粗细:粗体；宽度:350px；高度: ..

发布时间：2021-12-01 16:01:11 css background background-image linear-gradients background-position 前端开发

backgroundPositionX 不适用于 Firefox

我玩过 youtube 的精灵动画，但有问题.backgroundPositionX 不能在 Firefox 下工作(但可以在 Chrome 和 IE8 上工作)...这是代码:https://jsfiddle.net/74RZb/ 额外信息:问题是在firefox下它不会改变背景位置(不会播放动画)......没有错误，只是不会改变背景位置. 解决方案 Firefox 不支持 ba ..

发布时间：2021-11-10 05:46:49 javascript css firefox animation background-position 前端开发

如何使用“使用百分比"在指南针上?

我正在尝试使用 use_percentages 生成具有按百分比显示背景位置的图像精灵.但是编译SCSS文件后，background-position声明还是以像素为单位. 我的 SASS 代码: @import "compass/utilities/sprites";$精灵布局:智能；$sprite-sprite-dimensions: 真；$使用百分比:真；@import "图片/精灵 ..

发布时间：2021-07-14 21:07:57 sass sprite background-position compass 其他开发

背景固定:固定在Chrome上向后移动

我在Chrome(macOS中为v67)上的 background-position:fixed 遇到了一个非常奇怪的错误，该背景图片实际上在我滚动时会向上移动，而不是被 fixed . 这是该问题的一个代码笔: https://codepen.io/alexismo/pen/xzwmRE这是它的一个gif: https://gfycat.com/PolishedHarshAfricangr ..

发布时间：2021-04-26 20:26:23 html css background-position 前端开发

Gmail HTML电子邮件背景

我正在处理HTML电子邮件.我得到的问题是GMAIL不使用我给它的“背景位置".我有一张桌子的宽度为100％，其背景必须居中.大多数客户都能完美地做到这一点，但Gmail却不能.有解决方法吗? 内联CSS是这样的:(我将所有背景属性分割开了，因为否则大多数客户端不会以正确的方式显示它) ..

发布时间：2021-04-26 19:37:41 html css email gmail background-position 前端开发

CSS使背景图像使用字体字符

我想使用字体字符(例如，来自font-awesome)作为输入元素的背景图像. #ID {背景图片:content('\ f2d3');/*内容而不是url()*/背景位置:右中心；} 我的猜测是，我要么将角色另存为图像，要么将伪元素:after 与 content 一起使用，并放置适当的位置来实现此目的.只是想看看是否 ..

发布时间：2021-04-14 19:04:19 css svg background-image background-position css-content 前端开发

背景位置问题

在“> 此页面我一直在努力 ，此列的标题为“出价x询问": http://www.sellmycalls.com/so-bg-pos.png 在每个单元格背景中应该有一个条形图，用于传达单元格中数字彼此的比率. 因此，在每个单元格中，我都有一个背景色:灰色；和背景图片:全白；我无法在灰色背景上正确放置(足够大)的图像.实际上，在当前版本中，该图像完全没有显示. 如何正确设置图像的 ..

发布时间：2021-04-14 19:01:51 background background-position 其他开发

背景附件：在Firefox或Edge与Chrome中已修复

body {高度：150vh;}＃hero {位置：相对；边界：无；高度：100vh；}＃hero .hero-image {background-image：url（https://images.unsplash.com/photo-1518791841217-8f162f1e1131）;背景附件：固定；背景位置：中心；背景重复：不重复；背景尺寸：封面；位置：绝对；最高：0;左：0；底部：0正确 ..

发布时间：2020-10-11 06:26:35 css cross-browser css-transforms background-position background-attachment 前端开发

如何使用背景和CSS精灵重复图像的一部分?

我想使用CSS精灵和背景位置创建一些具有动态宽度的按钮，但是我不确定我想要的东西是否可以实现.. 我希望按钮具有左侧，中间和右侧，并根据需要重复中间.理想情况下，我希望此图像由一张11像素宽的图像组成，因此左右两侧均为5像素宽，中间为1像素重复.我可以在CSS中定义某种方法来使用图像的一个中心像素，并在需要(未知)宽度时重复该操作吗? 通常我使用两张图像来达到类似的效果-一张图像用于侧 ..

发布时间：2020-09-18 04:40:31 css background-image sprite background-position 前端开发

罕见的IE10错误:背景位置的CSS动画因多个背景和百分比而失败

这是一个非常具体的错误-但是，我希望有人向我展示解决方法！该错误主要是由于同时满足以下两个条件 的情况下，IE10无法执行background-position的CSS动画: 具有多个背景 以百分比设置background-position 这是一个演示，将Chrome与IE10进行比较: http://codepen.io/dalgard/pen/LiyIK 解决方案 ..

发布时间：2020-09-18 04:34:38 internet-explorer-10 css-animations background-position background-image 其他开发

背景位置百分比不起作用

我读过的每个地方都说它应该可以正常工作，但是由于某种原因，它不是很好. 这是为了解决其他人的问题，因此对我来说无关紧要，我只想知道为什么.问题出在.br .bg-image上.我知道我正在尝试使用calc()，但是使用简单的background-position: 50%也不起作用. http://jsfiddle.net/uLaa9fnu/2/ html { height ..

发布时间：2020-07-19 04:30:44 css percentage background-position 前端开发

jQuery Animate backgroundPosition无法正常工作

我正在尝试对某些div的背景位置进行动画处理，然后再做同样的回调动画. 我在这里想念什么? HTML: ​ CSS: .divimg { width:2 ..

发布时间：2020-06-28 20:21:48 jquery jquery-animate background-position 其他开发

在线性渐变上使用背景位置的百分比值

有什么方法可以使background-position取百分比值?目前，我的按钮仅适用于width和background-position的显式值. body { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-around; align-items ..

发布时间：2020-04-30 12:11:32 css background background-image linear-gradients background-position 前端开发

如何做一个.less mixin在CSS中生成网格的东西?

我想以.cX.rY选择器的形式生成一个css选择器矩阵，用于10 x 10之类的网格.但是我没有看到如何做到这一点(我很新.较少的).我也使用DotLess，所以也许有一些内置的限制.在那方面我不确定. @col-width: -24px; @row-width: -24px; .img-pos(@col, @row) { background-position: ..

发布时间：2020-04-30 10:03:33 background-image less background-position 其他开发

动画背景位置

任何人都知道为什么以下内容不起作用.如果我只是直接设置css而不设置动​​画，那么它将起作用. //div.css( {backgroundPosition: "bottom left"} ); $("#menu li").bind("mouseover", function(){ var div=$(this).find('div'); div.css ..

发布时间：2019-11-16 12:48:02 jquery jquery-animate background-position JavaScript

jQuery的背景只改变一个轴

我认为我的最后一个问题使每个人不知所措，所以我将简化 我仅尝试更改x轴的背景位置.默认情况下，如果仅定义一个值，则另一个默认为50%，因此此功能: function colorChangePiano() { var bp = $("background-position").css; $("#target").css('background-position', (bp ..

发布时间：2019-11-14 12:11:10 javascript jquery axis background-position 前端开发