Question

我试图用无框浏览器将背景图像放到iPad屏幕上。

图像的高度完全适合，但宽度不适合，图像重复，使页面可水平滚动。（我希望它是单页，不重复图像）。我可以知道如何将图像调整到宽度？

body {
background-image: url("main.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

同时，我有一个叠加内容，您点击该框就会显示内容。但是，iPad上的覆盖框离屏幕太大了。叠加层会影响背景吗？我怎样才能让它适合屏幕？

HTML
<!-- The Modal -->
    <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <img src="tyedit.jpg" />
            <div id="imagine">
                <span id="clicked">0</span><br/>
                <span id="word">VOTES</span>
            </div>
    </div>
    </div>

CSS
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
position: relative;  
margin: auto;
padding: 0;  
width: 70%;
height: 100%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}

Answer 1

如果你想解雇重复。您需要设置no-repeat参考此链接

w3schools-backgroundrepeat-property

full tutorial for background

div {
    background-image:url(smiley.gif);
    background-repeat:no-repeat;
    background-size: 100%;
}

试试这个并回复你还会遇到的问题。我会在这里回答答案

<强>更新

iOS的溢出问题

-webkit-overflow-scrolling: auto

请参阅此处webkit-overflow-scrolling

背景图像高度和叠加内容溢出并重复

1 个答案: