如何仅使用内联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，这将是一个解决方案：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;