CSS를 사용하여 입력에 그림을 삽입하는 방법

CSS를 사용하여 입력에 그림을 삽입하는 방법: 먼저 입력이 포함된 div에서 하위 요소를 설정한 다음 외부 div 위치를 상대 위치로 설정하고 마지막으로 margin-left 속성을 추가합니다. 입력.

이 튜토리얼의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

권장사항: css 비디오 튜토리얼

css 그림을 입력에 삽입하세요

1. 하위 요소

<div class="search">
    <span></span>
    <input type="text">
</div>

2를 상대적인

.search{
    position: relative;
}

로 설정하세요. 범위 위치를 절대값으로 설정하고 너비, 높이 및 배경 이미지를 설정합니다.

.search > span{
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(./search.png) no-repeat;
    background-size: 80% 80%;
    background-position: center;
}

4 입력에 margin-left 속성을 추가합니다.

.search > input{
    width: 100%;
    padding-left: 20px;
}

5. 렌더링

위 내용은 CSS를 사용하여 입력에 그림을 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!