html - 另一个图像内的 CSS 图像溢出 :hidden

标签 html css

所以我想将一个图像置于另一个图像(计算机屏幕)的中心,但它似乎不适用于 overflow:hidden。我把 posiition:absolute 放在里面的图像上,但随后另一个图像消失了。

我的 CSS 代码:

  .desktop-image {
        background-image: url("image-1.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .desktop-image img {
        width: 20%;
        position: relative;
        z-index: -999;
        left: 40%;
    }

我的 HTML:

<div class="desktop-image">
                    <img src="image-2.jpg" alt="">
                </div>
   </div>

最佳答案

将你的“电脑屏幕”图像设置为div的背景

div {
  background: url('computer-screen.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

关于html - 另一个图像内的 CSS 图像溢出 :hidden,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47355804/

相关文章:

css - 在css中创建一个新的html元素

javascript - 每次页面加载时用 javascript 突出显示文本

html - 将鼠标悬停在一个列表中时更改列表中每个链接的颜色

responsive-design - 如何在响应式设计中将最大高度设置为图像的原始高度?

html - 添加带有 CSS 边框的缩略图

html - anchor <a> 标签的设计问题

javascript - 在鼠标滚轮滚动时更改选择输入中的所选元素

html - 如何将选择选项转换为可点击链接区域?

html - Flexbox 内容溢出容器。 Chrome

html - 站点发布后 CSS 媒体查询不起作用