gpt4 book ai didi

CSS:修复容器主体外的图像

转载 作者:太空宇宙 更新时间:2023-11-04 08:18:13 24 4
gpt4 key购买 nike

我必须在容器外部固定一个蓝色的“锁”图像,如下所示:

enter image description here

到目前为止,我已经实现了以下目标:

enter image description here

我将此图像设置为容器的背景图像,我编写的容器的 CSS 是:

.container{
margin: 0 auto;
max-width: 620px;
background-color: $white;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
object-fit: contain;
margin-top: 30px;
padding: 40px;
min-height: 100px;
object-fit: contain;
overflow: hidden;
border-radius: 5px;
background-repeat: no-repeat;
background-image: url("../lock.svg");
}


<body>
<div class="container">

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

如果我给背景位置,图像隐藏在容器后面,像这样

enter image description here

请指教如何实现这一点?我的方法正确吗?

最佳答案

如果要根据容器设置锁定按钮,则必须设置容器的相对位置和按钮的绝对位置。

然后根据容器为按钮设置 top 和 right 属性。

.container {
position: relative;
}

.button {
position: absolute;
top: some px;
right: some px;
}

关于CSS:修复容器主体外的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45749943/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com