dc平台部技术分享

vue动态获取背景图片

2017-11-22  本文已影响752人  局外人12

在制作一个页面,我们经常遍历一些从数据库获取到的数据来显示,如图1所示,图片和文字都是从数据库获取到的,使用v-for可以很快的遍历显示,为了使点击效果更加明显,当鼠标点击时,把点击过的图片替换颜色,问题是怎么替换图片颜色呢?

图1

每一个职位类型设置2张图片,鼠标点击时灰色背景隐藏,蓝色背景显示?这样当然可以。但是,我们还可以让隐藏和显示的2张图片设计成1张图来使用,如图2。

图2

如果直接获取图片路径,并以图片形式(img)显示,图片上的灰色和蓝色背景就会同时显示,可是我们只需要显示一个背景,此时我们可以让它以背景(background)形式显示,代码如下(图3):

图3

此时我们需要用到background-position:x

y属性,没有选中时,我们设置背景位置位为background-position:0px

0px;,让灰色背景图显示。当选中时,设置蓝色背景显示的位置background-position:0px

-70px;,因为蓝色背景在灰色背景下方,所以设置y轴距离x轴不变。

图4

设置样式时,由于代码执行顺序,选中背景位置的样式要写在初始化背景的后面。

上一篇 下一篇

猜你喜欢

热点阅读