Question

我的进步是@ http://codebucket.webatu.com/code/portfoliotest/index.html

JSfiddle上的代码：http://jsfiddle.net/warmlaundry/qJbG4/70/

我想让'f'和'l'的边缘延伸到页面的边缘。我只是扩大了夹着这个词的两个图像的高度。

我希望这个词本身保持不变，我不希望扩展的图像取代任何其他元素。

有没有简单的方法来实现这一目标？我想它与正确定位有关，但我仍然没有完全掌握CSS定位的细微之处。

如果这个问题是重新发布，我道歉;在没有发布我自己的例子的情况下，我想不出用这句话来表达问题的好方法。

编辑：这是我的代码（因为链接似乎很糟糕）

<html>
<head>
<style type="text/css">

#portfolioBottom{position:relative;top:-1px;}
#portfoliotop{position:relative;top:1px;}

</style>
<script type="text/javascript">

var heightBottom;
var heightTop;
var interval;

function addHeight(){
    document.getElementById("portfolioBottom").style.width="249px";
    heightBottom = parseInt(document.getElementById("portfolioBottom").style.height);
    heightBottom=heightBottom + 5;
    document.getElementById("portfolioBottom").style.height=heightBottom;

    document.getElementById("portfolioTop").style.width="210px";
    heightTop = parseInt(document.getElementById("portfolioTop").style.height);
    heightTop=heightTop + 5;
    document.getElementById("portfolioTop").style.height=heightTop; 
}

</script>
</head>
<body>
<button onclick="interval=self.setInterval('addHeight()',1);">Start</button><button onclick="interval=window.clearInterval(interval)">Stop</button><br /><br />

<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio top.png" id="portfolioTop" style="height:6px;" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio.jpg" id="portfolio" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio bottom.png" id="portfolioBottom" style="height:6px;" />

</body>
</html>

Answer 1

如何使用CSS并将其定位为背景图像？

html {
    margin:0;
    padding:0;
    height:100%;
    background:#fff url("//imgur.com/qJMrs.png") 2em 50% fixed no-repeat;
}

演示：jsfiddle.net/Marcel/SMs9j（fullscreen）

Answer 2

我已经定位了两个扩展位，并且我将图像作为背景图像放入div然后完成工作。

刚刚使用了你的图像（定位它可能是用一个图像完成两个位，抱歉我没有纠正主图像上的缺失像素，我刚刚重叠像素，因此截止看起来纠正了主图像上缺少的像素会解决这个问题;） -

然后，一旦定位 - 我只是同时为高度和顶部/底部负面位置设置动画

我不能用JS做演示用jQuery，但希望定位的逻辑能帮助你在JS中做同样的事情

同样在我的身上我限制了身高以阻止它永远滚动，这实际上可能不实用，但因为这两个图像总是达到相同的高度，反向效果也将它们重新组合在一起..所以可能有什么好处？

使用Javascript＆amp; amp ;;在不中断流程的情况下垂直展开图像CSS

2 个答案:

演示：jsfiddle.net/Marcel/SMs9j（fullscreen）

the live example