我还在学习，不太擅长CSS，但有下面的代码，其中放置一个BuyNow按钮在图像上。我需要它留在正确的位置（响应）时，屏幕大小的变化。它几乎工作，但我认为图像按钮的大小也造成问题。我如何保持这一切在一起？
ASP.NET
<div class="image-container">
<asp:Image ID="ImgAddCoins" style="width:100%;" alt="Add Coins Background" runat="server" ImageUrl="~/files/images/addCoins.png" />
<asp:ImageButton ID="ImgBtnCoinStack20" alt="Buy 20 Coins" runat="server" CommandArgument = "20" class="ppbutton" OnClick="BuyCoins_Click" ImageUrl="~/files/images/icons/buttonBuy.png" />
</div>字符串
CSS
.image-container {
position: relative;
width: 100%;
}
.ppbutton {
position: absolute;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
color: #fff;
border: none;
cursor: pointer;
}型
1条答案
按热度按时间70gysomp1#
我对asp.net不是特别熟悉，但是你能不能让容器是一个div，有一个背景图像，然后删除图像元素？然后在图像容器div上设置样式，比如：
字符串
Display flex将成为你的CSS朋友：）-在这里阅读https://css-tricks.com/snippets/css/a-guide-to-flexbox/
从图像按钮中删除绝对位置和变换等。
这意味着有更少的HTML、更少的样式和更少的绝对定位的使用。
使用
background-size属性覆盖/包含裁剪背景图像。（我假设你不需要支持旧的浏览器）这个答案假设图像容器中没有其他内容/您不介意其中的其他内容居中对齐。