css - input 태그 안에 이미지 넣기 (feat. input background 투명하게, palceholder 색깔 넣기 등등... )

📌css - input 태그 안에 이미지 넣기

 

이런 식으로 input 태그 안에 img를 넣고 싶을 떈?? 

#login_box li:nth-child(1)>input{
  background: url(../src/all_image/login_icon.png) no-repeat 5px center;
  background-size: 27px;
  padding-left: 40px;
}

 

css 에서 background속성에 url()적용하면 된다. 

img와 text사이에 여백을 주고 싶으면 padding - left에 값주기 

input 안에 img를 넣은 것이기 때문에 padding값으로 여백을 줘야한다!! 

 

그 외에

 

이미지 크기 

background-size: 30px;

이미지 잘리지 않는 선에서 제일 크게 - contain(비율 안맞으면 남음)

이미지 찌그러지지 않는 한도 내에서 꽉 차게 - cover(비율 안맞으면 짤림)

이미지 찌그러지더라도 비율 맞게 - 100% 100%;

 

/* 가로 사이즈 지정 */
background-size : 50%;
background-size : 50px;
background-size : 3.1em;
background-size : auto;

/* 가로 세로 사이즈 지정 */
background-size : 50% 50%;
background-size : auto 50px;
background-size : 50px 50%;
background-size : auto auto;

 

 

위치 설정

 background-position: 270px center;

 

/* 픽셀 위치 지정 */
background-position : 30px 50px; /* x축 y축 */

/* 퍼센트 */
background-position : 20% 30%;

/* 키워드 지정하기 top bottom left right center */
background-position : right center;
background-position : center center;
background-position : center;

 

 

추가로

📌input 배경 투명하게

input{
 background-color:transparent;
}

📌palceholder 색깔 바꾸기 

input::placeholder {
  color:#d8d7d7;
}

📌input click시 바깥 포커스 없애기 

input:focus {
    outline: none;
  }