将背景图像应用于图像元素

我在将一些背景图像应用于图像元素时遇到了一些麻烦。有谁知道这是甚至可能吗？将背景图像应用于图像元素

我想要做的就是让这个画廊的下一个和上一个按钮根据图像的大小改变位置，所以我打算在上一个和下一个按钮中设置一个应用于图像正在显示。

这里的画廊，这是：http://reveriesrefined.com/myftp/stack_1/

2013-04-05 EmmaGamma

图像元素将调整自身以适应图像的大小。即使它是有效的CSS来将背景图像应用于img元素，它总是会被掩盖。更何况你不能点击背景图片。

更好的解决方案是将按钮编写为HTML。您可以使用CSS将按钮移动到最左侧和最右侧，或者如果您想将它们按照顶部和底部进行真实定位。

<style> 
    .image_cont { position: relative; display: inline-block } 
    /* left and right styling */ 
    .image_next_btn { position: absolute; left: 0; top: 50%; margin-top: -10px; } 
    .image_prev_btn { position: absolute; right: 0; top: 50%; margin-top: -10px; } 
    /* or top and bottom styling */ 
    .image_next_btn { position: absolute; left: 50%; top: 0; margin-left: -10px; } 
    .image_prev_btn { position: absolute; left: 50%; bottom: 0; margin-left: -10px; } 
</style> 

<div class="image_cont"> 
    <img src="images/Ania_02.jpg"> 
    <div class="image_prev_btn">prev</div> 
    <div class="image_next_btn">next</div> 
</div>

来源

2013-04-05 03:49:12 kipple

问题是，我克隆了图像并将其附加到#big div以使对中变得容易＃大有文本对齐：中心;另外，我已经尝试在#big中添加另一个div，并将该图像附加到该div上，但它开始给我带来奇怪的问题，尽管这是正确的解决方案，但我仍然抱有希望，我只是认为我做错了。我试图完成的主要事情是，我希望下一个，上一个和关闭按钮相对于图像区域定位（这样它们会根据显示的图像自动更改位置）。 – EmmaGamma 2013-04-05 04:09:52

如果图片没有显示，alt文本会显示（至少在Firefox中，IE也带有图片的边框和符号），背景图片可能会显示（alt文本将会用颜色和背景颜色着色，当然）。此外，如果图像具有透明度... – FelipeAls 2013-04-05 04:41:27

我已经在您的网站上面测试过上面的代码。尝试用image_cont元素替换其中一个图像，您会看到它完成了您提到的相对定位。一些常规技巧：阅读关于相对和绝对CSS定位并检查firefox的firebug（它使测试这些东西更快） – kipple 2013-04-05 10:57:32

将背景图像应用于图像元素

回答

相关问题