CSS: 창 너비의 50%에 해당하는 배경색을 설정합니다.
을 얻으려고 하는 것; 두된 것으로 ).background-color에서.body하고 .div창 너비 전체를 늘립니다.
나는 해결책을 생각해냈지만 불행히도.background-size하지 않습니다. IE7/8에서는 속성이 작동하지 않습니다.
body { background: #fff; }
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 100%;
}
수도 .background-color재산?
이전 브라우저 지원
을 사용할 수 , 에서 이런 것을 하고 싶을 것입니다.div요소:
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
예: http://jsfiddle.net/PLfLW/1704/
이 솔루션은 화면의 절반을 채우는 추가 고정 디브를 사용합니다.고정되어 있기 때문에 사용자가 스크롤해도 제자리에 유지됩니다.다른 요소가 백그라운드 div 위에 있는지 확인하기 위해 나중에 일부 z 인덱스를 만지작거려야 할 수도 있지만 너무 복잡해서는 안 됩니다.
문제가 있는 경우 나머지 콘텐츠의 z-지수가 배경 요소보다 높은지 확인하면 됩니다.
최신 브라우저
최신 브라우저가 유일한 관심사라면 다음과 같은 몇 가지 다른 방법을 사용할 수 있습니다.
선형 구배:
이것이 확실히 가장 쉬운 해결책입니다.다양한 효과를 위해 신체의 배경 특성에 선형 그라데이션을 사용할 수 있습니다.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
이로 인해 각 색상에 대해 50%의 하드 컷오프가 발생하므로 이름이 의미하는 "그라디언트"가 없습니다.스타일의 "50%" 부분을 실험하여 얻을 수 있는 다양한 효과를 확인해 보십시오.
예: http://jsfiddle.net/v14m59pq/2/
배경 크기가 있는 다중 배경:
▁to에 을 적용할 수 있습니다.html를 요를선다배이적미를용다니합지경음택한에 적용합니다.body를 합니다.background-size페이지 너비의 50%로 설정할 속성입니다.이렇게 하면 유사한 효과가 나타나지만 실제로는 한두 개의 이미지를 사용하는 경우에만 그라데이션에 사용됩니다.
html {
height: 100%;
background-color: cyan;
}
body {
height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;
}
예: http://jsfiddle.net/6vhshyxg/2/
추가 참고: 두 가지 모두에 유의하십시오.html그리고.body요소가 다음으로 설정됨height: 100%후자의 예에서내용이 페이지보다 작더라도 배경이 사용자의 뷰포트 높이 이상이 되도록 하기 위해서입니다.명시적인 높이가 없으면 배경 효과는 페이지 내용까지 내려갑니다.그것은 또한 일반적으로 좋은 관행일 뿐입니다.
"두 개로 분할" 배경을 달성하는 간단한 솔루션:
background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);
각도를 방향으로 사용할 수도 있습니다.
background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);
두 번째 색상을 0%로 설정하여 선형 그라데이션 대신 어려운 구별을 할 수 있습니다.
예를 들어.
그라데이션 -background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);
어려운 구별 -background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);
문제를 구현하는 한 가지 방법은 div의 css에 한 줄을 추가하는 것입니다.
background-image: linear-gradient(90deg, black 50%, blue 50%);
여기 데모 코드와 기타 옵션(수평, 대각선 등)이 있습니다. "Run code snipet(코드 스니펫 실행)"을 클릭하여 실시간으로 확인할 수 있습니다.
.abWhiteAndBlack
{
background-image: linear-gradient(90deg, black 50%, blue 50%);
height: 300px;
width: 300px;
margin-bottom: 80px;
}
.abWhiteAndBlack2
{
background-image: linear-gradient(180deg, black 50%, blue 50%);
height: 300px;
width: 300px;
margin-bottom: 80px;
}
.abWhiteAndBlack3
{
background-image: linear-gradient(45deg, black 50%, blue 50%);
height: 300px;
width: 300px;
margin-bottom: 80px;
}Vertical:
<div class="abWhiteAndBlack">
</div>
Horizonal:
<div class="abWhiteAndBlack2">
</div>
Diagonal:
<div class="abWhiteAndBlack3">
</div>이 질문은 아주 오래된 질문으로 이미 받아들여진 답을 가지고 있습니다. 하지만 저는 이 답이 4년 전에 게시되었더라면 선택되었을 것이라고 믿습니다.
저는 이것을 CSS로만 해결했고 추가적인 요소는 없었습니다!즉, 두 가지 색상은 두 가지 색상이 아닌 하나의 요소의 배경 색상일 뿐입니다.
그라데이션을 사용했는데, 색상 스톱을 서로 가깝게 설정했기 때문에 색상이 구별되고 혼합되지 않는 것처럼 보입니다.
네이티브 구문의 그라데이션은 다음과 같습니다.
background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
색.#74ABDD에서 시작합니다.0%그리고 여전히#74ABDD에49.9%.
그런 다음 그라데이션을 강제로 다음 색으로 전환합니다.0.2%두 색상 사이에 매우 단단한 선으로 보이는 요소 높이를 만듭니다.
결과는 다음과 같습니다.
재미있게 보내!
이것은 순수한 css와 함께 작동해야 합니다.
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));
테스트는 Chrome에서만 수행됩니다.
IE8+를 지원해야 했던 과거 프로젝트에서 저는 데이터 URL 형식으로 인코딩된 이미지를 사용하여 이를 달성했습니다.
이미지는 2800x1px로, 이미지의 절반은 흰색, 절반은 투명합니다.꽤 잘 작동했습니다.
body {
/* 50% right white */
background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;
/* 50% left white */
background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}
여기 JsFiddle에서 작동하는 것을 볼 수 있습니다.누군가에게 도움이 되기를 바랍니다 ;)
사용한 적이 있습니다.:after모든 주요 브라우저에서 작동합니다. 링크를 확인하십시오.Z 인덱스는 절대 위치를 가진 이후이므로 주의해야 합니다.
<div class="splitBg">
<div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
<div style="float:left; width:50%; position:relative; z-index:10;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<div style="float:left; width:50%; position:relative; z-index:10;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
</div>
<div style="clear:both;"></div>
</div>
</div>`
css
.splitBg{
background-color:#666;
position:relative;
overflow:hidden;
}
.splitBg:after{
width:50%;
position:absolute;
right:0;
top:0;
content:"";
display:block;
height:100%;
background-color:#06F;
z-index:1;
}
당신은 사용할 수 있습니다.:after이를 달성하기 위한 유사 선택기. 하지만 해당 선택기의 하위 호환성에 대해서는 확신할 수 없습니다.
body {
background: #000000
}
body:after {
content:'';
position: fixed;
height: 100%;
width: 50%;
left: 50%;
background: #116699
}
페이지 배경에 두 개의 다른 그라데이션을 사용했습니다.
를 사용하고 ,linear-gradient높이의 50%로:
background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;
이미지에 사용 bg
수직 분할
background-size: 50% 100%
수평 분할
background-size: 100% 50%
예
.class {
background-image: url("");
background-color: #fff;
background-repeat: no-repeat;
background-size: 50% 100%;
}
된 위치의 요소pseudo-element)를 사용하는 입니다.::after또는::before이하여 )을 설정하는 마십시오.z-index컨테이너 내부의 요소로 이동합니다. 그 한또그, 은것은.content:""유사 변수에 대한 규칙이 필요합니다. 그렇지 않으면 렌더링되지 않습니다.
#container {...}
#content::before {
content:"";
background-color: #999;
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 50%;
z-index: 1;
}
#content * {
position: relative;
z-index:2;
}
실시간 예: https://jsfiddle.net/xraymutation/pwz7t6we/16/
.background{
background: -webkit-linear-gradient(top, #2897e0 40%, #F1F1F1 40%);
height:200px;
}
.background2{
background: -webkit-linear-gradient(right, #2897e0 50%, #28e09c 50%);
height:200px;
}<html>
<body class="one">
<div class="background">
</div>
<div class="background2">
</div>
</body>
</html>이 예제는 대부분의 브라우저에서 작동합니다.
으로 두 첫은 0이고 두 색은 해서 100로 색입니다.
수평 방향을 사용합니다.
background: #000000;
background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
다양한 조정을 위해 http://www.colorzilla.com/gradient-editor/ 을 사용할 수 있습니다.
언급URL : https://stackoverflow.com/questions/8541081/css-set-a-background-color-which-is-50-of-the-width-of-the-window
'programing' 카테고리의 다른 글
| Oracle 날짜를 문자열로 변환 (0) | 2023.08.12 |
|---|---|
| Amazon S3 boto - 폴더를 삭제하는 방법? (0) | 2023.08.12 |
| 누적 정규 분포를 계산하는 방법은 무엇입니까? (0) | 2023.08.12 |
| Chocolaty 설치 경로는 어디입니까? (0) | 2023.08.12 |
| setCaseSensitiveInfo를 모든 폴더 및 하위 폴더에 재귀적으로 적용 (0) | 2023.08.12 |