html - Bootstrap 大图像 - 固定位置和响应式

Question

我试图让图像 float 到页面右侧，该图像在大屏幕和中屏幕中调整大小，但在小屏幕和超小屏幕中消失。

我可以在 bootstrap 中使用 hidden-sm 和 hidden-xs 使图像消失，但我正在努力使图像(考虑到它太大)像附件无响应<一样漂浮在页面右侧/strong> 图片。

我需要使用 Width: % 来移动吗？我试过了，但在响应等方面效果不佳。

Screenshot - non-responsive

这是图片的 HTML:

<!-- PICTURE -->
<div class="container-fluid">
    <div class="row">
        <div class="col-offset-md-9 col-md-3 hidden-sm hidden-xs">
        <div class="BackgroundImage center-block img-responsive"><img src="Pictures/Profile.png" alt="Background Image"></div>
        </div>
    </div>
</div>

这是我目前所掌握的简单 CSS:

/* Background Image/Neil Photo */
.BackgroundImage {
    width: 190px;
}

.BackgroundImage img {
    z-index: -1;
    margin-bottom: -366%;
    display: fixed;
}

Answer 1

对于固定位置，您必须使用“position”而不是“display”，并制作如下样式:

.BackgroundImage {
    //width: 190px;
}

.BackgroundImage img {
    z-index: -1;
    position: fixed;
    top:0;
    right:0;
}

但是，您的网站中还有另外两个问题使其看起来没有响应:

您需要删除:

p { 
    width:110%; 
}

您需要删除:

footer { 
    margin-left:19%; 
}