时间戳

首页 > 解决方案 > 如何添加浮动图像以使其在屏幕上保持可见而不管滚动？

css - 如何添加浮动图像以使其在屏幕上保持可见而不管滚动？

问题描述

我正在开发引导主页。我想添加一个浮动丝带图像（立即购买），就像：

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>

标签： cssasp.nettwitter-bootstrapcss-float

解决方案

我知道您的问题 - 班级/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，它将起作用。

推荐阅读