자르기 상단과 큰 원의 하단

내가 텍스트없이 여기에 본 내 명함과 유사한 내 홈페이지 만드는 방법을 알아 내려고 노력 해요 : http://katiehambor.com/images/businesscardexample.png 자르기 상단과 큰 원의 하단

내가 모방이 자른 원을 가지고 웹 페이지를 원하는을 내 명함 및 거의 모든 브라우저 크기에서 배경 이미지 (대각선 줄무늬)는 여전히 왼쪽과 오른쪽에서 볼 수 있습니다. 기본적으로 원의 위쪽과 아래쪽이 잘리고 왼쪽과 오른쪽이 노출되어 배경 이미지가 표시됩니다 (이 코펜에 표시되지 않음). 응답 성이 좋기를 바랍니다. 누군가가 브라우저를 작게 만들면 서클은 여전히 중심에 배치됩니다. 나는 또한 원의 바닥을 볼 수 있기를 원하지 않습니다. 왜냐하면 지금 아래로 스크롤하면 하단 가장자리를 볼 수 있기 때문입니다.

원안에 많은 텍스트가 없으므로 모든 텍스트가 안에 들어갈 것이라고 걱정할 필요가 없습니다.

나는 또한이 사이트가 반응 형이므로 가로형 스크린에서는 이와 같이 보일 것이지만 수직 형 스크린에서는 전체 원이 보일 것입니다. 나는 내 문제가 원을 자르기 때문에 전체 원을 보는 법을 알고 있기 때문에 이것을 알아낼 필요는 없지만, 명심해야 할 것이 있습니다.

원 안에 텍스트 입력란이 있습니다. 이제 'text'라고 말하면서 참조 용으로 투명하게 만들었습니다. 이 작업을 수행하는 데 더 많은 div가 필요할 수도 있지만 실제로 여기에서 어디로 가야할지 모르겠습니다.

내 질문에 대해 정리할 수있는 사항이 있으면 언제든지 알려주십시오. 혼란 스러울 경우 죄송합니다.

편집 : 다음은 처음 시도한 내용이지만 이제는 here으로 변경되었습니다.

/*original on: http://codepen.io/mezzotessitura/pen/kfenK */ 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Katie Hambor</title> 

<style> 
body { 
    text-align: center; 
    background-image:url(images/background.jpg); 
    background-size: auto; 
    color: black; 
} 

.box { 
    background-color:#00a886; 
    padding:5px; 

    top:-10%;bottom:0;left:15%;right:15%; 
    width:55em; 
    height:55em; 
    position:absolute; 
    border-radius:50%; 
} 

.textbox { 
    height:auto; 
    margin:5em; 
    position:absolute; 
    top:0;bottom:0;left:0;right:0; 
    background-color:#fff; 
    opacity:.25; 
} 


</style> 
</head> 

<body> 
<div class="box"> 
<div class="textbox"> 
<p>text</p> 
</div> 
</div> 
</body> 
</html>

출처

2014-09-05 Katie Hambor

나는 레딧 here에 답변을 받았다.

반응 형 양상을 이루기 위해 vw을 사용합니다. 그리고 센터링을위한 변형 (이 CSS 트릭 문서에서). fixed 대신 position: absolute을 사용했지만 div.box이 body에 상대적인 위치에 있으므로이 경우 모두 동일한 작업을 수행합니다.

출처

2014-09-05 19:38:22

try background-size:cover 신체에. 하지만 크로스 브라우저 친화적 인 만들 것입니다.

-webkit-background-size:cover; 
-moz-background-size:cover; 
-o-background-size:cover; 
background-size:cover;

출처

2014-09-05 00:36:59 user2684452

이 질문과 약간 관련이 있습니까? – Devin

고마워,하지만 그건 내 문제가 아니야. –

이 방법이 효과적입니다. 원을 만들기 위해 CSS를 사용하여 http://codepen.io/anon/pen/utkbF

는 :

.box{ 
    border-radius: 50%; 
    background-color:#00a886; 
    margin: auto; 
}

출처

2014-09-05 17:38:44 Tim

불행히도, 아니오. 나는 그것이 타원이 아닌 항상 원이되기를 원합니다. –

자르기 상단과 큰 원의 하단

답변

관련 문제