如何将滚动框编码到图像上？

Question

HTML和CSS已经好几年没涉足了；我很生疏。

我很难让滚动框正确地位于 this image 之上。

我想做的是在图像上放置一个滚动框，这样最终结果看起来就像将进入滚动框的文本在终端屏幕上滚动（而不是在灰色屏幕上滚动）框架容纳屏幕）。基本上，我希望滚动框位于图像的顶部，这样，当滚动框内的内容时，所述内容看起来就好像它实际上正在图像内的终端屏幕上滚动（同样，没有在屏幕框架上滚动的内容）。

这是我到目前为止设法整理的编码。现在好像乱七八糟的。。。希望不要乱到没人能用。

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

Answer 1

你想要这样吗？

#screen {
  background-image: url("https://s5.postimg.org/pwy1ni4mv/Terminal_Screen.png"); 
  background-repeat: no-repeat; 
  background-size: 100% auto; 
  margin: auto; width: 1000px; 
  height: 591px; 
  position: relative; 
  border: 0px none; 
  padding: 50px 50px 0px;
}

#container {
  overflow: hidden; 
  height: 100%; 
  width: 100%;
}

#container p {
  color: green; 
  overflow-y: scroll; 
  padding-left: 200px; 
  padding-right: 200px; 
  width: 630px; 
  height: 523px;
}

<div id="screen" target="_blank" rel="nofollow">
  <div id="container">
    <p>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.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.   

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   

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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur<br target="_blank" rel="nofollow">
</p></div></div>

这是jsFiddle

Answer 2

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function test(){
    document.getElementById("formPemasaranSertifikat").style.display="none";
    document.getElementById("load").style.display = "block";
    document.getElementById("bodi").style.display="none";
    }
</script>
<style type="text/css">
    .tv{
        background: url("https://s5.postimg.org/pwy1ni4mv/Terminal_Screen.png") no-repeat; 
        background-size: 100%;  
        width:1000px;
        height:591px;
        margin: 0 auto;
        position: relative;
    }
    .textbox{
        width: 800px;
        position: absolute;
        top: 50px;
        left: 120px;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 470px;
    }
</style>
</head>
<body>
    <div class="tv">
        <div class="textbox">
<p>Content would go here...?<br></p>
        </div>
    </div>
</body>
</html>

Answer 3

如您所见，您必须有 2 个 div：第一个用于背景图像并隐藏滚动条，第二个用于包含文本并使其滚动。 jsFiddle这里。

<div class="img">
    <div class="scroll">
      <a>
         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.
      </a>
    </div>
</div>
<style>
   .img{
  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%;
}

.scroll{
  height: 100%;
  width: 100%;
  overflow-y: auto;
  padding-right: 25%;
}

.scroll a{
  font-size: 25px;
  color: green;
  font-family: Calibri;
}
</style>

如何将滚动框编码到图像上？

How to code a scroll box onto an image?

html

css

scroll

overlay

overflow