CSS 버튼에 배경 이미지를 추가하는 방법(자세한 설명 및 예시)

여기 기사에서는 버튼으로 아름다운 그림을 추가할 수 있어 페이지 스타일을 쉽게 변경할 수 있습니다. 그라데이션 배경을 사용할 수 있습니다. 버튼의 배경은 버튼의 색상을 변경할 수 있습니다. Overflow: hided를 사용하고 마스크를 제거할 수 있습니다.

여기서 위쪽, 왼쪽, 오른쪽, 아래쪽을 사용하여 버튼을 덮을 높이와 너비를 조정하고 위에서 언급한 그라데이션과 투명도를 조정합니다. 마스크를 위쪽과 아래쪽으로 나누어서 사용하는데, 위쪽은 그라데이션 배경을 사용하고, 아래쪽은 단색만 사용하면 됩니다. (사실 하나의 마스크로도 가능하지만 만들 방법이 없습니다. 마스크 그라디언트의 테두리이므로 두 개를 사용하십시오). 코드는 이렇습니다. CSS 코드는 다음과 같습니다.

.mask-t, .mask-b {
  position: absolute;    
  -moz-box-sizing: border-box;
  -wekit-box-sizing: border-box;
  box-sizing: border-box;    
}
.mask-t {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 50%;
   
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;  
   
  background: -moz-linear-gradient(270deg, 
    rgba(117, 117, 117, .4) 10%, 
    rgba(94, 94, 94, .4) 30%
  );
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(rgba(117, 117, 117, .4)), to(rgba(94, 94, 94, .4))
  );
     
  border: 1px solid rgba(255, 255, 255, .4);
  border-bottom: none;
}
.mask-b {
  top: 50%;
  left: 1px;
  right: 1px;
  bottom: 0;
   
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px 0 0;  
   
  background: rgba(0, 0, 0, .3);
     
  border: 1px solid rgba(255, 255, 255, .3);
  border-top: none;
}

사실 저는 CSS3 그래디언트 사용법을 완전히 이해하지 못해서 실수할까봐 여기서는 설명하지 않겠습니다. 이 작업을 수행할 때 공식 문서의 예제를 따랐습니다.

Gecko: https://developer.mozilla.org/index.php?title=en/CSS/-moz-linear-gradient
WebKit: http://webkit.org/blog/175/introducing- css- 그래디언트/

좋아요, 마스크 레이어가 준비되었습니다. 다음에는 버튼을 만들어 보겠습니다. 버튼 레이어는 마스크 위치를 제공하고 버튼의 크기와 색상을 설정해야 합니다. 아름다움을 위해 CSS3의 내용이기도 한 둥근 모서리와 그림자를 추가합니다. 코드는 다음과 같습니다. CSS 코드는 다음과 같습니다.

.button {
  position: relative;
  background: red;
  width: 160px;
  height: 40px;
  line-height: 40px;
   
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
   
  -moz-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  box-shadow:0 1px 3px rgba(0, 0, 0, .5);
}

버튼의 색상을 변경하려면 .button의 배경을 변경하세요. 버튼의 테두리 반경은 마스크 레이어의 테두리 반경과 동일하게 설정되어야 합니다. 버튼에 오버플로: 숨김을 추가한 다음 마스크의 테두리 반경을 제거하려고 했습니다. 왜 마스크가 계속 표시되나요? 전문가에게 문의하세요. 다음으로 버튼의 텍스트 부분이 있습니다. 이 레이어는 텍스트가 명확하게 표시될 수 있도록 마스크 레이어 위에 있어야 합니다. 마스크 레이어와 마찬가지로 절대 위치를 설정하고 높이와 너비를 100%로 설정합니다. 텍스트 레이어가 문서 흐름에서 마스크 레이어 뒤에 있기 때문에 Z-인덱스를 설정할 필요가 없습니다. 코드는 다음과 같습니다. CSS 코드는 다음과 같습니다.

.text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  color: #FFF;
  text-decoration: none;
}

이 시점에서 버튼이 준비되었습니다. 이 버튼의 장점은 사진을 사용하지 않고, HTTP 연결 수를 줄여주며, 트래픽도 당연히 줄어든다는 점입니다. 단점은 IE가 아직 CSS3를 지원하지 않기 때문에 이 버튼은 거의 사용되지 않는다는 점입니다. 필터가 있지만 사진을 사용하는 것만큼 빠르지는 않습니다. IE가 빨리 없어졌으면 좋겠습니다.

추천 학습: CSS 비디오 튜토리얼

위 내용은 CSS 버튼에 배경 이미지를 추가하는 방법(자세한 설명 및 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!