Question

我正在引导首页。我想添加一个浮动的功能区图像（立即购买），就像：

http://cohhe.com/demo/sky/sky-directory/网站。

我试图将其添加到我的网页中，但是没有出现。我知道我必须在CSS中使用Fixed和Top属性，但我并不仅获得图像。我在表格下方添加了购买功能区链接。我可以将其添加到错误的位置吗？我是Bootstrap的新手。

代码：

#buy-now-ribbon {
    /*background: url(images/ribbon.png) no-repeat;*/
    background: url("http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/ribbon.png") no-repeat;

    top: -8px;
    right: 25px;
    position: fixed;
    z-index: 222;
    width: 53px;
    height: 145px;
    display: none;
}

#backgroundimage {
    background-image: url("https://d12dkjq56sjcos.cloudfront.net/pub/media/wysiwyg/Dubai-Skyline-Burj-Al-Arab-Big-Bus-Tours-01.17.jpg");
    width: 100vw;
    height: 100vh; 
    background-size:100% 100%;
    background-repeat: no-repeat;
    position: relative;
    max-width:100%;
}

<html>
<body>

    <form id="form1" runat="server">
        <a href="http://themeforest.net/item/sky-wordpress-listings-theme/10061836?ref=Cohhe" target="_blank" class="buy-now-ribbon"></a>
        <div class="container-fullwidth example2">
            <nav class="navbar navbar-default navbar-static-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="http://disputebills.com">
                            <img src="images/layout/check.png" style="width:451px;height:36px;" class="img-responsive" alt="dubaiexporters.com"/>
                        </a>
                    </div>
                    <div id="navbar2" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active">
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="#">Advertise</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Exhibitions
                                    <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="#">Trade fairs in U.A.E</a>
                                    </li>
                                    <li>
                                        <a href="#">Trade fairs worldwide</a>
                                    </li>
                                    <li>
                                        <a href="#">Add Your Event</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Memberships</a>
                            </li>
                            <li>
                                <a href="#">About us</a>
                            </li>
                            <li>
                                <a href="#">News</a>
                            </li>
                            <li>
                                <a href="#">Contact us</a>
                            </li>
                            <li>
                                <a href="#">Partners</a>
                            </li>
                            <%--     <li><a href="#"></a></li>--%>
                            <li></li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
                <!--/.container-fluid -->
            </nav>

            <div id="backgroundimage"></div>
        </div>
    </form>

</body>
</html>

Answer 1

我知道您的问题-类/ ID混淆。在CSS中，您有以下一行：

#buy-now-ribbon

但是在您的HTML中会弹出以下行：

<a href="http://themeforest.net/item/sky-wordpress-listings-theme/10061836?ref=Cohhe"
   target="_blank" class="buy-now-ribbon"></a>

您遇到的问题是ID选择器（＃）没有与类声明（class="buy-now-ribbon）链接。类的选择器是点/句点（。）。在您的CSS中，将#buy-now-ribbon更改为.buy-now-ribbon，它将起作用。

Answer 2

我添加了此CSS：

.buy-now-ribbon{
    background:url(images/ribbon.png) no-repeat;
     /*background: url("http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/ribbon.png") no-repeat;*/
 top:0;
 left:0px;
 position:fixed;
 width:10%;
 z-index:9999;
 height:150px;
 background-attachment: fixed;
}

我在这里做了一些更改。我在ul课后放了div，它对我有用。

<ul class="nav navbar-nav navbar-right">
        ...
        ...                   
</ul>
 <a href="" target="_blank" class="buy-now-ribbon"></a>

如何添加浮动图像，以便无论滚动如何在屏幕上保持可见？

2 个答案: