时间戳

首页 > 解决方案 > 图片不适合页面，需要另外高于所有内容

html - 图片不适合页面，需要另外高于所有内容

问题描述

目前正在做一个小项目，我已经删除了必要的 css 和 html 以便更容易理解我的问题。

尽管如此，

我只是想让图像正确对齐到页面上。此外，想知道是否可以使图像的位置始终显示在任何其他类型的内容之上。

在没有内容的情况下离开网站

添加了内容，只是没有在其上方绘制

非常感谢所有帮助/建议！

#app-illustrations{pointer-events:none;position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;width:1287px;left:50%;margin-left:-644px;-webkit-transform:scale(.5) rotate(-12deg) translateX(50px);transform:scale(.5) rotate(-12deg) translateX(50px);-webkit-transform-origin:50% 20%;transform-origin:50% 20%}
#app-illustrations.hidden-preload{visibility:hidden}
#app-illustrations div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:38px;background:#fff;-webkit-box-shadow:inset 0 4px 7px 1px #fff,inset 0 -5px 20px rgba(173,186,204,.25),0 2px 6px rgba(0,21,64,.14),0 10px 20px rgba(0,21,64,.05);box-shadow:inset 0 4px 7px 1px #fff,inset 0 -5px 20px rgba(173,186,204,.25),0 2px 6px rgba(0,21,64,.14),0 10px 20px rgba(0,21,64,.05)}
#app-illustrations .tablet-landscape{width:512px;height:352px;margin:115px 50px 0}
#app-illustrations .phone-big{display:none}
#app-illustrations .phone-small{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;width:225px;height:467px}
#app-illustrations .tablet-portrait{width:450px;height:675px;margin-top:115px}@media (min-width:670px){
#app-illustrations{-ms-flex-wrap:wrap;flex-wrap:wrap;width:512px;margin-left:-50px;top:215px;-webkit-transform:rotate(-12deg);transform:rotate(-12deg);-webkit-transform-origin:100% 0;transform-origin:100% 0}
#app-illustrations.hidden-preload{visibility:visible}
#app-illustrations [class^=tablet]{margin:0}
#app-illustrations .tablet-landscape{width:512px;height:352px}
#app-illustrations .phone-small{width:225px;height:467px;margin:0 0 50px 176px}
#app-illustrations .tablet-portrait{display:none}}@media (min-width:880px){
#app-illustrations{width:829px;margin-left:-10px;top:20px}
#app-illustrations .tablet-landscape{-ms-flex-item-align:end;align-self:flex-end;margin-right:50px}
#app-illustrations .phone-big{display:-webkit-box;display:-ms-flexbox;display:flex;width:267px;height:553px}
#app-illustrations .phone-small{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;margin:50px 50px 0 0}
#app-illustrations .tablet-portrait{display:-webkit-box;display:-ms-flexbox;display:flex;width:450px;height:675px;margin-top:50px}}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<section id="app-illustrations" class="hidden-preload">
  <div class="tablet-landscape">
    <img alt="slack" src="img/v3/home/app-illustrations/slack.svg">
  </div>
  <div class="phone-big">
    <img alt="digitalocean" src="img/v3/home/app-illustrations/digitalocean.svg">
  </div>
  <div class="phone-small">
    <img alt="postmates" src="img/v3/home/app-illustrations/postmates.svg">
  </div>
  <div class="tablet-portrait">
    <img alt="asana" src="img/v3/home/app-illustrations/asana.svg">
  </div>
</section>

</body>
</html>

图片在这里：https ://ufile.io/y0yj1 它们是 SVG 无法添加到项目中的！

标签： htmlcss

解决方案

我不确定我是否完全理解你的问题，但这就是你想要的吗？https://codepen.io/anon/pen/ZqdvOW?editors=1100

我刚刚添加

body {
  overflow-x: hidden;
}

并将内容下面的 html 放在另一个部分中：

<section id="app-content">
  <p>
    Lorem ipsum dolor sit amet, consectetur a....
  </p>
</section>

推荐阅读