如何添加一个浮动图像，使其在屏幕上仍然可见，无论滚动？

问题描述 投票：1回答：2

我的工作引导主页上。我想添加一个浮动带状图像（现在购买）就像：

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

enter image description here

我试着将它添加到我的网页上，但不会出现了。我知道，我必须使用Fixed和CSS Top财产，但我不是只得到图像。我在下面的形式购买色带链接。我可以添加它到一个错误的地方。我是新来引导。

enter image description here

码：

#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>
css asp.net twitter-bootstrap css-float
2个回答
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;
}

我做了一些改变了这儿过得放在DIV UL下课之后，它为我工作。

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

我知道你的问题 - 一类/ 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，它会工作。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.