css로백라운드
본문
백그라운드를 정확한게 7대3으로 할수잇을까요?
7은 검정색 3은 파랑색 이런식으로 브라우저 전체를기준으로 7:3으로하려는데 이게 어렵네요
이미지를 넣어서 만들려니까 7:3이안나오는거같구
답변 2
css로 아래와 같이 넣어보세요.
background:linear-gradient(to right, rgba(0,0,0,1) 70%, rgba(0,0,255,1) 70%)
감사합니다 혹시. 익스나 크롬이나 싸파리나 대부분 지원하나요?
아랫분이 남겨주신대로 -webkit-, -o-, -moz-를 붙여서 여러개를 써주시면 크로스브라우징 적용이 됩니다.
윗분 답변에 크로스브라우징 질문하셔서 남깁니다..
근데 그라데이션이면.. 정확하게 구분되는게 아니라 서서히 바뀌어가는건데 맞나 싶네요..
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) , rgba(255,255,255,0.5));
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,0.5));
/* For Firefox 3.6 to 15 */
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,0.5));
/* Standard syntax */
background: linear-gradient(to right, rgba(255,255,255,0) , rgba(255,255,255,0.5));
자세히 보시면 70%로 구분점을 두었습니다.
70% 경계로 검정과 파랑이 "완전히" 변합니다.