保持元素与背景对齐

所以，我试图创建一个布局，其中的段落标签应该始终与背景图像的特定部分对齐。保持元素与背景对齐

链接与工作示例https://codepen.io/marcelcruz/pen/BRgaVL

我希望文本总是水晶球内，但一旦我调整的背景缩小窗口，水晶球上升，他们不再对齐。

有没有办法让背景只在两侧缩小，而不是在顶部和底部？还有其他更好的方法吗？

的这部分代码看起来是这样的：

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background: url("https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg") no-repeat; 
 
    background-size: cover; 
 
    height: 100vh; 
 
} 
 

 
#text { 
 
    color: red; 
 
    background: yellow; 
 
    width: 60px; 
 
    position: absolute; 
 
    top: 900px; 
 
    left: 50%; 
 
}

<div id="main"> 
 

 
    <p id="text">TEXT COMES HERE</p> 
 

 
</div>

谢谢！

来源

2017-05-29 Marcel Cruz

将文本添加到图像可能更容易 – sol

没有完整的方法来执行此操作。当你调整大小时，图像上的球不是永远的中心。所以没有办法。需要指定绑定。 – HTCom

无法将文本添加到图像，因为它是动态的，由JS生成。 –

<html> 
<head> 
<style> 
body { 
    background: url("https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg") no-repeat; 
    background-size: 100% 100%; 
} 

#text { 
    color: red; 
    background: yellow; 
    width: 60px; 
    position: absolute; 
    left: 50%; 
    top: 80%; 
    } 
</style> 
</head> 
<body> 
<div id="main"> 

    <p id="text">TEXT COMES HERE</p> 

</div> 
</body> 
</html>

它的工作原理，当你设置背景大小：100％100％;

还有什么？点击link_for_more

来源

2017-05-29 16:44:01

这可能与<img>标签和相对定位来实现，例如

.container img { 
 
    max-width: 100%; 
 
} 
 

 
.img-container { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.positioning { 
 
    position: absolute; 
 
    left: 45%; 
 
    bottom: 30%; 
 
    background-color: red; 
 
    color: white; 
 
    padding: 4px; 
 
    font-size: 17px; 
 
    line-height: 18px; 
 
}

<div id="container" class="container"> 
 
    <div class="img-container"> 
 
    <div class="positioning"> 
 
     Some Text 
 
    </div> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg" /> 
 
    </div> 
 
</div>

希望这有助于！

来源

2017-05-29 16:47:00

保持元素与背景对齐

回答

相关问题