0

我有一张剪刀穿过虚线的图像，类似于图像中的那个：

带虚线的剪刀

基本上，我希望将图像放在我所有页面的页脚上。我希望虚线在页面上水平移动，以便大约 90% 的页面宽度被虚线填充，然后，我希望在此之后放置剪刀，这样看起来剪刀是横切页面。

我想用 CSS 做这个，并且需要它在所有屏幕分辨率上工作。但是，问题是，我如何实现它，以便它适用于所有浏览器和所有版本。如果有人能在这方面提供帮助，将不胜感激。如果这可以用 jQuery 轻松完成，我也愿意。

这是我迄今为止所拥有的：

.bottom_border_scissor img{
  margin-top: -23px;
 }
.bottom_border_scissor {
  text-align: left;
  margin-left: 81%;
  background: url(../images/bottom_without_dot.png) repeat-x 0 center transparent;

}
4

1 回答 1

9

更新版本添加到 2018-02-16 回答

版本 1 - 需要额外的容器

这是我如何剥这只猫的皮...

我会创建一个占页面宽度 90% 的 div。我会给这个 div 一些剪刀的背景图像（减去任何虚线）。最后，我会在里面放置一个子 div 并将其设置为虚线。

没有虚线的剪刀

HTML

<div id="scissors">
    <div></div>
</div>

CSS

#scissors {
    height: 43px; /* image height */
    width: 90%;
    margin: auto auto;
    background-image: url('http://i.stack.imgur.com/cXciH.png');
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
}
#scissors div {
    position: relative;
    top: 50%;
    border-top: 3px dashed black;
    margin-top: -3px;
}

演示：http: //jsfiddle.net/4CxZH/

版本 2 - 单元素

HTML

<div id="scissors"></div>

CSS

#scissors {
    height: 43px; /* image height */
    width: 90%;
    margin: auto auto;
    background-image: url('http://i.stack.imgur.com/cXciH.png');
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
    overflow: hidden;
}
#scissors:after {
    content: "";
    position: relative;
    top: 50%;
    display: block;
    border-top: 3px dashed black;
    margin-top: -3px;
}

演示： https ://jsfiddle.net/4CxZH/99/

于 2013-09-05T10:57:09.013 回答