gpt4 book ai didi

javascript - CSS 和 JS - 将背景图像扩展到 div 之外

转载 作者:行者123 更新时间:2023-11-28 13:51:56 24 4
gpt4 key购买 nike

我目前正在尝试找到一种解决方法,让 Niall Doherty 的 Coda Slider 2 上的箭头突出显示所选的选项卡。最初我尝试使用标题图像上的图像来执行此操作,虽然它在我的 Mac 上的 Safari 中看起来不错,但它在其他设备上并不重要(请参阅 www.lukekendalldesign.co.uk/pss/productsandservices )

我尝试使用 CSS 箭头创建它,但事实证明这相当困难,因此我找到了使用背景图像的解决方法,但我遇到了另一个问题。

http://cl.ly/HovO (抱歉,我无法上传图片 - 新手!)

请引用上面链接的截图。与背景匹配的浅灰色三 Angular 形是标题图像的一部分。黑色三 Angular 形使用以下 CSS 代码定位:

.coda-nav ul li a.current { 
border-top-right-radius: 10px;
border-top-left-radius: 10px;
color: white;
height: 60px;
z-index: 20000;
background: url(../images/triangle.png) no-repeat 50% 100%;
position: relative;
overflow: visible;
}

我想做的是将这个黑色箭头放在灰色图像箭头所在的位置(如果这有意义的话?)我该怎么做?

我已经尝试添加边距和填充,但是它扩展了灰色背景并且没有将背景图像黑色三 Angular 形向下推。

虽然我找到了类似的解决方案,但似乎没有一个适用,因为类 .current 是使用以下 JS 应用的:

// If we need a tabbed nav
$('#coda-nav-' + sliderCount + ' a').each(function(z) {
// What happens when a nav link is clicked
$(this).bind("click", function() {
navClicks++;
$(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
offset = - (panelWidth*z);
alterPanelHeight(z);
currentPanel = z + 1;
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
});
});

我将非常感谢任何人可以就此向我提供的任何帮助 - 因为这是一个 JS 问题,所以我有点力不从心! :(

最佳答案

我已经在 Firefox 中使用 Windows 上的 fire bug 尝试过这个。我认为有两个问题。首先是 ul 元素的边距应为 167 像素(黑色箭头在图像中的位置不佳(中间是 232 像素,您是这个意思吗?)。箭头只需要向下移动,我通过将背景位置设置为:url("../images/triangle.png") 无重复滚动 50px 60px 透明 希望这有帮助。

关于javascript - CSS 和 JS - 将背景图像扩展到 div 之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11300782/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com