Question

我正试图在iPhone内部制作屏幕截图。我有一个像这样的HTML：

package com.googlecode.javacv.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import com.kosalgeek.genasync12.AsyncResponse;
import com.kosalgeek.genasync12.PostResponseAsyncTask;

import java.util.HashMap;

public class MainActivity extends AppCompatActivity implements AsyncResponse, View.OnClickListener {

    EditText etUsername, etPassword, etname;
    Button btnLogin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        etUsername = (EditText)findViewById(R.id.etUsername);
        etPassword = (EditText)findViewById(R.id.etPassword);
        etname = (EditText)findViewById(R.id.etname);
        btnLogin = (Button)findViewById(R.id.btnLogin);
        btnLogin.setOnClickListener(this);

    }

    @Override
    public void processFinish(String output) {
        Toast.makeText(this, output, Toast.LENGTH_LONG).show();
    }
    @Override
    public void onClick(View v)
    {
        HashMap postData= new HashMap();
        postData.put("txtUsername",etUsername.getText().toString());
        postData.put("txtPassword", etPassword.getText().toString());
        postData.put("name", etname.getText().toString());

        PostResponseAsyncTask task = new PostResponseAsyncTask (MainActivity.this , (AsyncResponse) postData);
        task.execute("http://theeatery.org/uet1.php");

    }

}

和我的css：

<div class="iphone-container">
   <img src="images/partenaires.jpg"  class="partner-img"alt="">
 </div>

图像正确向上滚动，但我希望它在到达iphone屏幕顶部时消失。因为当我向上滚动屏幕截图时，它现在看起来像这样：

我需要在css和html中更改以获得正确的结果，就像在本网站的第5部分一样：

http://wefoot.co/

截图链接： http://i63.tinypic.com/anc80l.jpg

iphone容器的链接： http://i67.tinypic.com/6hhwti.png

Answer 1

你需要做的是将一个div放在iphone图像的顶部，与屏幕截图区域的大小完全相同，然后将该div设置为overflow：scroll。

有点像这样：

<div class="iphone-container">
   <div class="iphone-screenshot-area">
       <img src="images/partenaires.jpg"  class="partner-img"alt="">
   </div>
</div>

对于css：

.iphone-container {
  background-image:  url("../images/single-iphone.png");
  background-size: cover;
  height: 530px;
  width: 420px;
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;


}

.iphone-screenshot-area {
    position:absolute;
    top:40px; //Totally guessing here, adjust to proper value after testing
    left:25px; //Also guessing here, adjust to proper value after testing
    width:355px;
    height:490px; //Also guessing here, adjust to proper value after testing
    overflow:scroll;
}
.partner-img {
  position: relative;
  width: 355px;;
  height: auto;
  z-index: 2;
}

Answer 2

<html>
<head>
<style>
.iphone-container {
      background-image:  url("http://s21.postimg.org/hirg419tj/iphone.png");
      background-size: cover;
      height: 790px;/*the height of the iphone image*/
      width: 400px;/*the height of the iphone image*/
      position: relative; 
    }

.text-holder {
	  position: absolute;
	  width: 336px;/*the width of the iphone-image screen*/
	  height: 600px;/* the height of the iphone-image screen*/
	  z-index: 2;
	  top: 100px;
	  left:38px;
	  overflow-y:scroll;
	  overflow-x:hidden;
}


</style>
</head>
<body>
<div class="iphone-container">
<div class="text-holder">
<img src="http://s12.postimg.org/yvewkodb1/screen_text.png"><!--I didnt use any class for this image but made a div to place it inside the iphone-->
</div><!--close the text-holder div which is the screen of the iphone image-->
</div><!--close the iphone-container div-->
</body>
</html>

在iphone容器内制作屏幕截图

2 个答案: