트위터 부트 스트랩이 버튼에 대한 커스텀 CSS를 오버라이드하는 것을 막으십시오.

Question

레일즈 3.2.3 프로젝트에 트위터 부트 스트랩을 사용하고 있습니다. application.css.scss 파일에 각 스타일 시트를 가져오고 있습니다. 다른 폴더에있는 렌더링 파일이있는 정적 폴더의 페이지를 응용 프로그램 파일의 부트 스트랩 파일 위에있는 static.css.scss 파일로 사용자 지정하고 있습니다. 단추를 일반 btn 클래스와 다른 것으로 만들려고합니다. 내 코드는 다음과 같습니다

.btn.signup { 
    margin-top: 10px; 
    font-size: 18px; 
    padding: 10px 48px 10px; 
    background-color: rgb(255, 138, 22); 
} 

.btn.signup:hover { 
    margin-top: 10px; 
    font-size: 18px; 
    padding: 10px 48px 10px; 
    background-color: rgb(255, 138, 22); 
} 

그러나 파이어 폭스에서, 버튼은 여전히 ​​올바른 색깔 바깥 쪽 가장자리를 제외하고 회색이다. 버튼 위로 마우스를 가져 가면 아래쪽 절반이 주황색으로 변합니다. 버튼을 검사하면 다음과 같이 표시됩니다.

.btn.signup:hover, li.signup.buttons:hover { 
    margin-top: 10px; 
    font-size: 18px; 
    padding: 10px 48px; 
    background-color: rgb(255, 138, 22); 
} 

button.btn, input.btn[type="submit"] { 
} 

.btn:hover, li.buttons:hover { 
    color: rgb(51, 51, 51); 
    text-decoration: none; 
    background-color: rgb(230, 230, 230); 
    background-position: 0px -15px; 
    -moz-transition: background-position 0.1s linear 0s; 
} 

.btn:hover, li.buttons:hover, .btn:active, li.buttons:active, .btn.active, li.active.buttons, .btn.disabled, li.disabled.buttons, .btn[disabled], li.buttons[disabled] { 
    background-color: rgb(230, 230, 230); 
} 

.btn.signup, li.signup.buttons { 
    margin-top: 10px; 
    font-size: 18px; 
    padding: 10px 48px; 
    background-color: rgb(255, 138, 22); 
} 

전체 버튼이 주황색으로 표시되게하려면 어떻게해야합니까? 나중에 hover color를 바꿀 것입니다.하지만 지금은 모두 오렌지색이되고 회색은 아닙니다.

Answer 1

아직도 도움이 필요하시면 잘 모릅니다. 아 글쎄 ... 나는 내 생각에 여전히 투구 할 것 같다.

Twitter 부트 스트랩의 클래스 .btn에는 실제로 약간의 그라디언트 효과가 발생하도록 배경 이미지가 첨부되어 있습니다.

그라디언트는 대부분의 버튼 배경을 포함하므로 선택된 배경색 만 가장자리에 표시됩니다.

이 그래디언트는 버튼 위로 마우스를 가져 가면 배경색이 부분적으로 나타나는 이유입니다. -moz-transition을 사용하면 배경 이미지 그래디언트가 위쪽으로 이동합니다 (일반적으로 버튼 색상이 점차 어두워지는 효과를 시뮬레이트하는 데 사용됩니다). 당신이 그것 위에 마우스를 가져갈 때). 면밀히 살펴보면 단추의 위쪽 절반이 그라디언트의 아래쪽에 채색되어 있고 아래쪽 절반은 배경색이라는 것을 볼 수 있습니다.

맞춤 클래스에 background-image: none; 중 하나를 정의하거나 더 나은 아직 시각적 미학을 잃지 않도록 자신의 그라디언트를 정의해야합니다. 후자의 조치를 취하는 경우 그라디언트의 하단 색상을 background-color, rgb (255, 138, 22)와 동일하게 만드십시오. 그렇지 않으면 버튼 위로 마우스를 가져 가면 그래디언트가 끝나는 지점이 명확 해지며 배경색이 시작됩니다.