배경의 일부에 페이지의 콘텐츠를 추가하고 싶습니다. 즉, 메인 컨텐츠의 양면에 2 개의 사용되지 않은 컬럼을 유지하고자합니다. this과 같이 메인 콘텐츠 양쪽에 사용하지 않은 청색 영역 2 개를 볼 수 있습니다. 또한 그림자 효과가 나타납니다. 따라서 컨텐츠가 입력되는 기본 흰색 배경 영역은 이미지 여야합니다.HTML/CSS에서 페이지의 중심 배경을 만드는 방법은 무엇입니까?
어떻게하면됩니까?
화면에 표시된 전체 페이지에 실제로 다른 시트를 붙일 수 있어야합니다. (링크에서 사용되지 않는 두 개의 열을 언급합니다).
그림자 효과가 있습니다. 따라서 컨텐츠가 입력되는 기본 흰색 배경 영역 은 이미지 여야합니다.
음 ... 아니요. 그림자는 메인 영역에서 box-shadow을 사용하여 수행 할 수 있습니다. 그리고 당신은 margin: 25px auto;
개발자 도구 (IE 및 Chrome의 F12)는 놀라운 기능입니다. ,이 마술처럼,
background-color: rgb(220, 227, 230);
을 그리고 :
margin: 2em 3% 10em;
box-shadow: 0px 0.3em 1em #000;
을 그리고 html 요소를 가지고 : 당신이 그들을 사용하여 시도하는 경우
예를 들어, 당신은 몸이 가지고 볼 것 "푸른 색"의 배경과 주요 내용의 그림자. 놀랄 만한.
수직으로 성장합니다. 예. 가로로 고정 너비를 제거하고 px 또는 em 또는 %로 값을 넣어 측면 여백을 만들 수 있습니다. – Ana
나는 [여기] (http://stackoverflow.com/questions/7882560/how-do-i-achieve-a-page-over-the-background-effect-with-html-css/7882593#7882593)을 보았습니다. -webkit-border-radius, -moz-border-radius와 같은 속성이 있지만 google에서는 히트를 찾을 수 없습니다. 그들은 필요합니까? – batman
지원하려는 브라우저에 따라 다릅니다. IE9 +, Firefox 4 이상, Chrome, Safari 5.1 이상, Opera 10.5 이상은 접두어가 붙지 않은 버전을 지원합니다. 'box-shadow' 브라우저가 http://caniuse.com/#feat=css-boxshadow와 border-radius를 지원하는 것에 대한 자세한 테이블 http://caniuse.com/#feat=border-radius // ** 수정 ** 그들은 속성이 아닙니다. 그것들은 그냥 접두어로 붙은 속성 이름입니다. – Ana