html - 如何仅使用内联 CSS 将滚动框定位在图像顶部

Question

我昨晚发布了这个问题，但没有完全理解我想问的是什么。经过一些研究后，我受到了教育，我准备再试一次!

在我经常访问的一个网站(为了保护隐私，该网站将保持匿名)，我试图根据我选择的主题(科幻小说，尤其是外太空)来装饰我的个人资料页面。我想在这张图片上放一个滚动框:

但我在让它发挥作用时遇到了很大的困难。我刚刚发现原因是因为我工作的特定网站不允许用户直接使用 HTML 或 CSS 来装饰他们的个人资料；相反，它是我需要的内联 CSS(我相信是 HTML 标签中的 CSS 代码？)代码，我对它只是略微熟悉。

这是我到目前为止设法拼凑的编码......

<p 
   style="
   background-image: url(https://s5.postimg.org/pwy1ni4mv/Terminal_Screen.png);
   background-repeat: no-repeat;
   background-size: 100%;
   margin: auto;
   width: 1000px;
   height: 591px;
   overflow: auto;
   position: relative;
   border: 0px;
   padding-top: 50px;
   padding-right: 50px;
   padding-bottom: 0px;
   padding-left: 50px;"
   target="_blank"
   rel="nofollow">
       Content would go here...?
       <br target="_blank" rel="nofollow"/>
</p>

这是一个JSFiddle展示我正在努力实现的想法。请注意，图像不是滚动框的背景，而是它的桌面。另请注意，滚动框中的内容不会越过图像中包含终端屏幕的灰色框。这正是我想要完成的。

Answer 1

如果你允许在 div 中粘贴，这将是一个解决方案:

<div style="background-image: url(https://s5.postimg.org/pwy1ni4mv/Terminal_Screen.png);
  background-size: 100% 100%;
  width: 480px;
  height: 320px;
  text-align: center;
  overflow: hidden;
  padding: 7%;">
    <div style="height: 100%;
  width: 100%;
  overflow-y: auto;
  padding-right: 25%;">
      <p style="font-size: 25px;
  color: green;
  font-family: Calibri;">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      </p>
    </div>
</div>

如果您只能操纵内联 css，我看不到在图像顶部放置滚动框的可能性。您可能做的最好的事情就是一些静态文本。

<p style="background-image: url(https://s5.postimg.org/pwy1ni4mv/Terminal_Screen.png);
  background-size: 100% 100%;
  width: 480px;
  height: 320px;
  text-align: center;
  overflow: hidden;
  padding: 7%;font-size: 25px;
  color: green;
  font-family: Calibri;">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet dolore magna aliquyam erat, takimata sanctus.
      </p>