如何仅使用嵌入式CSS将滚动框放置在图像顶部

紫苑Nyxx

我昨晚发布了这个问题，但没有完全理解我要问的问题。经过一番研究后，我已经受过教育，可以再次尝试了！

在我经常光顾的网站上（出于隐私考虑，该网站将保持匿名），我试图根据自己选择的主题（科幻小说，尤其是外太空）来散布我的个人资料页面。我想在此图像上方放置一个滚动框：

但是，要使它正常工作，我一直遇到很大的困难。我刚刚发现原因是因为我正在使用的特定网站不允许用户使用纯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，展示了我正在尝试实现的想法。请注意，图像不是滚动框的背景，而是它的桌面。还要注意，滚动框内的内容不会越过图像中包含终端屏幕的灰色框。这正是我要完成的工作。

公司

如果允许您粘贴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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。