728x90
반응형

Opacity 3

CSS를 사용하여 페이지 로드시 페이드 인 효과 내기

질문 : 페이지로드시 페이드 인 효과를 위해 CSS 사용 페이지로드시 텍스트 단락이 페이드 인되도록 CSS 전환을 사용할 수 있습니까? 나는 그것이 http://dotmailapp.com/ 에서 어떻게 보 였는지 정말 좋아하고 CSS를 사용하여 비슷한 효과를 사용하고 싶습니다. 이후 도메인을 구매했으며 더 이상 언급 된 효과가 없습니다. 보관 된 사본은 Wayback Machine에서 볼 수 있습니다. 일러스트레이션 이 마크 업 : ​This is a test 다음 CSS 규칙을 사용합니다. #test p { opacity: 0; margin-top: 25px; font-size: 21px; text-align: center; -webkit-transition: opacity 2s ease-in; -mo..

CSS를 사용하여 텍스트 또는 이미지에 투명한 배경을 제공하는 방법

질문 : CSS를 사용하여 텍스트 또는 이미지에 투명한 배경을 제공하려면 어떻게합니까? CSS 만 사용하여 background 을 반투명하게 만들지 만 요소의 내용 (텍스트 및 이미지)을 불투명하게 만들 수 있습니까? 텍스트와 배경을 두 개의 별도 요소로 사용하지 않고이 작업을 수행하고 싶습니다. 시도 할 때 : p { position: absolute; background-color: green; filter: alpha(opacity=60); opacity: 0.6; } span { color: white; filter: alpha(opacity=100); opacity: 1; } Hello world 자식 요소가 부모의 불투명도를받는 것처럼 보이므로 opacity:1 은 opacity:0.6 에 상..

CSS에서 테두리 불투명도를 설정하는 방법

질문 : CSS에서 테두리 불투명도를 설정할 수 있습니까? 이와 같은 요소의 테두리를 반투명하게 만드는 간단한 CSS 방법이 있습니까? border-opacity: 0.7; 그렇지 않다면 이미지를 사용하지 않고 어떻게 할 수 있는지 아는 사람이 있습니까? 답변 불행히도 opacity 요소는 전체 요소 (텍스트 포함)를 반투명하게 만듭니다. 테두리를 반투명하게 만드는 가장 좋은 방법은 rgba 색상 형식을 사용하는 것입니다. 예를 들어, 불투명도가 50 % 인 빨간색 테두리를 제공합니다. div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: paddin..

728x90
반응형