Question

我正在尝试将图片移动到页面顶部：已删除链接，请参阅下文。

编辑：上面的链接已被删除。您可以在http://bixproduce.wpengine.com/bix-word/

查看此示例

我希望此图像保持全宽并位于页面顶部，登录输入显示在图像上方。这可用于：http://bixproduce.wpengine.com/

但我无法在帖子中使用图片。我尝试了很多溢出，清除，位置等组合，但没有任何效果。

html看起来像这样：（编辑）我想我不能把html放在这里。

我的CSS目前看起来像这样：

.single .entry-thumb {clear: left;overflow: hidden;top: 0 !important;}
.single .entry-thumb img {float: left;}

我必须使用clear和overflow来强制输入拇指div与图像的高度相同。

我尝试过使用＆＃39; position：absolute;＆＃39;在entry-thumb div上，但是以某种方式收缩图像并且它不再填满整个宽度。

如果我手动为图像和div设置固定高度，则位置绝对有效，但是入口换行div移动到屏幕顶部，似乎忽略了图像在那里的事实。图像的固定高度并不理想，因为其他一切都是响应的。

我已经尝试了很多来源修复并测试了许多可能性。我无法让它发挥作用。任何帮助将不胜感激。

谢谢你，贾里德

Answer 1

尝试将top属性缩小几个像素，然后将图像调整到适合您的位置。当我在页面上测试它时，-65px似乎有效。

.single .entry-thumb {clear: left;overflow: hidden;top: -65px !important;}

注意：仅使用!important作为最后的手段。因此，在不使用!imporant的情况下进行测试，看看一切如何。

Answer 2

从HTML中删除图片并将其添加到您的

<强> CSS

article {
    background: url("http://bixproduce.wpengine.com/wp-content/uploads/2015/11/produce-on-wood-hd-01-1184x275.jpg");
    background-size: cover;
    background-position: center;
}

.entry-wrap {
    padding: 100px 0;
}

Answer 3

我尝试了wmeade的解决方案。它确实有效，但在页面下方会导致一些不受欢迎的样式。

Nenad Vracar解决方案也不完全可行，因为这是一个Wordpress网站，所讨论的图像是一个特色图像。您无法通过css添加精选图片，至少不能使用样式表。

然而，我接受了他的建议并进行了一些研究，看看是否有可能迫使Wordpress将特色图像视为背景图像。我找到了这个：https://wordpress.org/support/topic/insert-featured-image-in-div-style-background并用它来修改我的帖子模板文件。现在它看起来很棒，一切正常。

感谢您的帮助！

强制图像到页面顶部

3 个答案: