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

你想要这样吗？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

这里是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>

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

3 个答案: