html 배경 이미지가 모바일 브라우저에서 열릴 때 반복됩니다.

방금 xhtml 및 css를 배우기 시작했습니다. 나는 내 자신을위한 웹 페이지를 썼다. 랩톱 및 PC 브라우저에서 열 때 잘 보입니다. 모바일 브라우저에서는 배경 이미지가 세로로 두 번 반복됩니다. 나는 너비, 높이 또는 background-repeat를 수정하려고 시도했으나 할 때마다 이미지가 사라졌습니다. 나는 여기에서 찾았다. 다른 대답은 나를 이해하기에는 너무 깊다.html 배경 이미지가 모바일 브라우저에서 열릴 때 반복됩니다.

<body> 

    <h1>Chris Guo</h1> 

    <table border="1" cellpadding="10" cellspacing="10"> 
     <tr> 
     <td><a href="https://www.facebook.com/profile.php?id=100004400829590">Facebook</a></td> 
     <td><a href="http://chrisgjh.tumblr.com/">Tumblr</a></td> 
     <td><a href="https://www.instagram.com/gjjhhh_/">Instagram</a></td> 
     </tr> 
    </table> 
    <br /> 
    <p>CS student @University of Canterbury, amateur photographer.<br /> 
    I have a little bit of passion about everything and always keen to 
    try new things. <br /> 
    <br /> 
    <a href="mailto:[email protected]">Email Chris</a> 
    </body>

출처

2016-06-25 chrisgjh

아론의 해결책은 정확합니다.

그러나 개발에 대한 새로운 경험이 있기 때문에이 기사에 추가하고 싶습니다. Aaron의 솔루션은 이미지 사용에 매우 효과적이며 귀하의 질문은 사실 이미지 사용에 관한 것입니다. 그러나이 경우 배경은 그라디언트입니다. 그래디언트를 렌더링하려면 CSS를 통해 그래디언트를 렌더링하고 이미지를 모두 사용하지 않는 것이 좋습니다.

다음은 예입니다 : https://jsfiddle.net/yojuo7m2/2/

background: linear-gradient(to bottom, #89ffde 0%,#8f4bff 100%) no-repeat fixed;

위의 코드는 최신 브라우저에서 당신에게 그라데이션을 얻을 것이다. 구형 브라우저에 대한 추가 구문은 바이올린을 참조하십시오.

구문을 완전히 배우려면 그라디언트를 읽어 보시기 바랍니다. 일단 이해한다면, colorzilla의 그라디언트 생성기 사이트에서 쉽게 코드를 생성 할 수 있습니다. 특정 그라디언트에 대한 링크는 다음과 같습니다. http://www.colorzilla.com/gradient-editor/#89ffde+0,8f4bff+100

아론 솔루션에 도움이 되길 바랍니다.

출처

2016-06-25 01:16:50

변경 CSS : 여기

 body { 
      text-align:center; 
      background-image:url(dark-gradient-tumblr-wallpaper-1.jpg) 
     }

몸의 HTML 코드입니다 : 여기

clownbox.tech이 몸에 내 CSS 코드 : 여기

내 웹 페이지입니다 ~까지 :

body { 
     text-align:center; 
     background:url(dark-gradient-tumblr-wallpaper-1.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

    h1 {color:white; 
     font-family:arial; 
     font-weight:bold; 
     line-height:150%; 
    } 

    table { 
       margin:0 auto; 
       width:300px; /* or whatever width you want */ 
     font-style:italic; 
      } 

    p { 
    text-indent:25px; 
    text-align:center; 
    color:grey 
    }

출처 : https://stackoverflow.com/a/22556456/6496271

출처

2016-06-25 00:49:24 user31415

안녕하세요, Aaron, 감사합니다. 지금은 사라지지 않습니다. 하지만 여전히 모바일 브라우저에서 작동하지 않습니다, 그것은 전체 브라우저 창을 채우지 않습니다 – chrisgjh

정말? 그것은 내 크롬 검사 요소 모바일 뷰어 및 내 안드로이드 전화에서 작동합니다. 다시로드 했습니까? 그것은 나일지도 모른다. 어떤 브라우저를 사용합니까? – user31415

David Vasquez의 추가 정보를 참조하십시오. 놀라운 솔루션. – user31415

html 배경 이미지가 모바일 브라우저에서 열릴 때 반복됩니다.

답변

관련 문제