0

我的进度是@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>
4

2 回答 2

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（全屏）

于 2011-04-02T07:51:52.090 回答
1

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

刚刚使用了您的图像（通过定位可能可以使用单个图像来完成这两个位，对不起，我没有从主图像中纠正丢失的像素，我现在只是重叠了像素，因此截止看起来更正了主图像上缺少像素可以解决这个问题；） -

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

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

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

活生生的例子

于 2011-04-02T08:54:19.120 回答