当在元素上使用时，我有以下闪光效果，效果非常好p，但它不适用于任何div元素，也不适用于img. 那么，我应该进行哪些修改才能确保闪光效果在任何元素上发挥作用。

片段如下

 .shimmer {
      display: inline-block;
      color:grey;
      background: #acacac -webkit-gradient(linear, 100% 0, 0 0, from(#acacac), color-stop(0.5, #ffffff), to(#acacac));
      background-position: -50rem top; /*50px*/
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-animation-name: shimmer;
      -webkit-animation-duration: 2.2s;
      -webkit-animation-iteration-count: infinite;
      -webkit-background-size: 50rem 100%; /*50px*/
      font-size: 90px;
    }
    
    @-webkit-keyframes shimmer {
        0% {
            background-position: -50rem top; /*50px*/
        }
        70% {
            background-position: 12.5rem top; /*200px*/
        }
        100% {
            background-position: 12.5rem top; /*200px*/
        }
    }

<div>
<p class="shimmer">Shimmering Text</p>

<div>
<img src="https://i.stack.imgur.com/MeQxk.png" …

这里的小问题,我有一个精灵图像,其中包含具有正常和悬停效果的图标.

这是我现在拥有的css ..

.wi{
    background-image:url(images/icons/small/wi.png);
    background-repeat:no-repeat;
    display:block;
    overflow:hidden;
    height:24px;
    width:24px;
}

.wi-delete{background-position:0 0;}
.wi-edit{background-position:-24px 0;}
.wi-fullscreen{background-position:-48px 0;}
.wi-imageedit{background-position:-72px 0;}
.wi-download{background-position:-96px 0;}
.wi-tags{background-position:-130px 0;}
.wi-windowed{background-position:-154px 0;}

如您所见,图标的正常状态始终为背景位置Y = 0,因此悬停图像全部处于Y = -24px

我的图标的html是:

<div id="something" class="wi wi-delete"></div>

问题是:可以只更改Y位置,这样我可以为所有图标指定一个CSS行悬停状态,而不是每个图标都有一个css行？

就像是:

.wi:hover{
background-position: auto -24px;
}

代替

.wi-delete:hover{background-position:0 -24px;}
.wi-edit:hover{background-position:-24px -24px;}
..and so on..

我读到的每个地方都说这应该可以正常工作,但由于某种原因,它不是.

这是为了修复别人的问题所以修复它对我来说无关紧要,我只是想知道为什么.问题出在了.br .bg-image.我知道我正在尝试使用calc()但是使用简单background-position: 50%也不起作用.

http://jsfiddle.net/uLaa9fnu/2/

html {
  height: 100%;
  width: 100%;
}
body {
  margin: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.bg-image {
  height: 600px;
  width: 800px;
  background-image: url('http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
}
.relative {
  position: relative;
}
.containeroverlay {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
}
.framesizer {
  height: 340px;
  width: 300px;
  overflow: hidden;
  position: absolute;
}
.frame {
  background-image: url('http://i.imgur.com/4AcIXsD.png');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 340px; …

inb4:抱歉,超长的图片需要超长时间才能加载,如果您不想等待,请点击链接并阅读问题!

所以我正在创建一个网站的原型,我用它制作了一个虚假的3D效果,用鼠标移动了2d图像.当用户点击其中一个三角形以突出显示时,我想使用滤镜模糊.

我的问题是,当我添加模糊时,它在firefox中完全中断.我对chrome中的模糊没有任何问题,但由于某些原因在firefox中,应该居中的背景图像变为右对齐并由其自己的div裁剪,如果我在检查器中更改了背景位置,它会移出障碍区域.

这是Chrome的屏幕截图,然后是我在firefox中获得的内容.

在放弃整个模糊想法的同时,我并不完全不知道该做什么.任何解决方案的想法都是相关的

我想用悬停功能更改按钮的背景图像y位置.是否有一种简单的方法来保持xpos,或者我应该首先获得位置,拆分它并再次使用$ .css().

如果有人悬停其中任何一个,我应该改变所有3跨度的背景位置.所以bt_first:悬停似乎不可用.

这是我的用法.我写了#should保持相同#来放置我不想改变xpos的值:

$('.bt_first,.bt_sec,.bt_third').hover(function(){
        $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -150px'})
},function(){
        $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -110px'});
});

这是我的html:

<div><a id="add_comment_btn"><span class="bt_first comments_t"><span>&nbsp;</span></span><span class="bt_sec">&nbsp;</span><span class="bt_third">Comments</span></a></div>

和css:

.bt_first,.bt_sec,.bt_third,.logout_t,.comments_t span {
    background: url('img/toolbar_bckrnd.png') no-repeat;
}
.bt_first {
    background-position: left -110px;
    display: inline-block;
    height: 24px;
    width: 15px;
}
.bt_sec {
    background-position: -149px -110px;
    display: inline-block;
    height: 24px;
    width: 2px;
}
.bt_third {
    background-position: right -110px;
    display: inline-block;
    height: 24px;
    padding: 0 10px;
}

假设我有一个div元素,背景position: 0%;知道如何将位置更改为例如position: 100%;但悬停时使用关键帧

我似乎无法正确使用关键帧,它永远不会工作,我拥有所有最新的浏览器.

谢谢.

我在使用多个背景制作按钮时遇到了一些麻烦.我知道我可以使用:之前和之后但我想在可能的情况下弄明白这一点.

这是Jsfiddle http://jsfiddle.net/syren/qerUT/1/

在那,我已经展示了我最终希望它看起来像什么.在那一个,我用过

background-position: left top, 97% 90%;

只是为了展示我想要它的样子.因为我希望它能够优雅地扩展以用于其他按钮和翻译,我想使用它:

background-position: left top, right 5px bottom 5px;

但这不起作用.根据规格它应该,所以我不确定我做错了什么.有任何想法吗？谢谢!

我认为我的最后一个问题压倒了所有人,所以我会简化

我试图仅改变x轴的背景位置.默认情况下,如果只定义了一个值,则另一个默认为50%,所以此函数:

function colorChangePiano() {
    var bp = $("background-position").css;
    $("#target").css('background-position', (bp == -1131) ? '-377' : '0');
}

返回background-position 0 50%:;

如何修改函数以更改x轴但保持y轴不变？

编辑 - >这是一个4列4行精灵,因此y轴应保持动态.工作现场:http://www.avalonbyeaw.com点击"完成".我们在现场网站上使用了一些疯狂复杂的脚本,但是无论如何我都会把它留在这里,因为我仍然真的想找到解决这个问题的方法

我必须执行以下操作:div的顶部是渐变图像,然后在底部继续作为纯色.我可以用简单的CSS做到这一点吗？我知道以下内容无效.

{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;

注意:图像填充的第一个225px应该没有背景颜色

我想使用字体字符（例如来自 font-awesome）作为输入元素的背景图像。

<style>
#id {
    background-image: content('\f2d3'); /* content instead of url() */
    background-position: right center;
}
</style>

<input id="test" />

我的猜测是我要么将角色保存为图像，要么使用伪元素:after与内容和足够的定位来实现这一点。只是想看看是否有更好的解决方案。是否可以访问 SVG 中的字符并使用内联 SVG 作为内容？

更新：

我用 SVG 做了一个部分解决方案（参见https://fiddle.jshell.net/92h52e65/4/），但仍然存在使用正确字体的问题。

<style>
#input1 {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30px" height="20px"><text x="5" y="15" font-family="FontAwesome">x&#xf2d3;</text></svg>');
  background-position: right center;
  background-repeat: no-repeat no-repeat;
}
</style>

<input id="input1" placeholder="insert some text here" size="30" required />

为了在 IE 和 FF 中工作，我必须使用 base64 编码而不是 utf8。我把 utf8 留在这里是为了让它更具可读性。