Question

我试图做这样的事情：

http://funedit.com/imgedit/soubory/small_6719449301396601413.jpg

问题是我在CSS中完全是新的，我不知道如何制作它，我只是尝试类似的东西：

.newsnames{
    background-image: url("images/newsname-right.png");
    background-repeat: repeat-x;
    width:572px;
    height:227px;
    display:inline-block;
    position: absolute; left: 415px; top: 39px; right: 0px; bottom: 0px;
    font-family: Arial;
    font-weight: 13px;
    color: white;
    text-decoration: none;
    line-height: 45px;    
}

但它只是给它那个黑暗的背景和位置，但我需要的是让一切看起来像在图像上，我完全迷失了，有人可以帮我吗？

我的实际尝试可以在这里看到：http://funedit.com/andurit/newnew/

P.S。非常重要的是所有图像都必须转到CSS而不是HTML！

我将它分成3份？（那个蓝色箭头，中间和右边有日期和聊天吗？如果是，我怎么能用一个a改变3件事：悬停？

Answer 1

你必须给你的css提供z-index，以便右边的图层显示在你的图像之上

    .newsnames{
        background-image: url("images/newsname-right.png");
        background-repeat: repeat-x;
        width:572px;
        height:227px;
        display:inline-block;
        position: absolute; left: 415px; top: 39px; right: 0px; bottom: 0px;
        font-family: Arial;
        font-weight: 13px;
        color: white;
        text-decoration: none;
        line-height: 45px;    
        z-index: 1000;
}

您的图像会在z平面向外投影，因此它会显示在背景图像的顶部。

你可以在这个div中提供你的其他元素......

Answer 2

我将它分成3份？（那个蓝色箭头，中间和右边有日期和聊天吗？如果是，我怎么能用一个a改变3件事：悬停？

在我看来，你唯一的机会是使用jquery来实现这种需求（特别是最后一部分）。

CSS - 制作漂亮的滑块而不将图像放入HTML中

2 个答案: