问如何相对于背景图像宽度定位元素
EN

Stack Overflow用户

提问于 2014-10-28 10:30:44

回答 1查看 2.2K关注 0票数 3

注意:我没有JS访问权限。这必须用CSS来完成。

我有一个背景图像(850 X 1080)定位在屏幕的右下角。我已经缩放了图像，所以它占了宽度的38%：

background-position: right bottom;
background-size: 38% auto;
background-attachment: fixed;

现在，我想定位另一个元素，无论屏幕大小如何，它总是与背景图像的某一部分排列在一起。我该怎么做？目前，我已经将其设置在离右侧和底部边缘一定距离的地方，但这不是我想要的：

height: 220px;
width: 155px;
bottom: 400px;
right: 400px;

我的代码可以在这里找到，我试图定位的部分是:hover + .hide的定义(第12行)。我试图定制的页面是我的MyAnimeList配置文件，在这里我试图将封面艺术与红色剑的边缘对齐。

回答已采纳

发布于 2014-10-28 10:39:17

当背景大小根据其容器的宽度变化时，您可以使用百分比边距来定位元素。百分比边距是根据容器的宽度计算的，甚至是顶部/底部边距(请看这里)。

例子：

:hover + .hide{
    position:absolute;
    bottom:0;
    right:0;
    margin-bottom:20%; /* tune this */
    margin-right:20%; /* tune this */
}

这是一个演示

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26606005

复制

相似问题

问如何相对于背景图像宽度定位元素EN