인라인 블록 속성을 사용하여 배경 이미지 아래에 텍스트를 배치하는 방법

Question

안녕하세요 저는 배경 이미지 아래에 텍스트를 넣으려고합니다. 여기에 두 개의 배경 이미지를 나란히 놓고 각 이미지 아래에 텍스트를 배치하고 싶습니다. 나는 그것이 스타일 인라인 블록 속성을 가지고 한 div 클래스를 가져 가라. 그래서 어떻게 도와 줄 수 또는 인라인 블록 property.i를 사용하여 할 수있는만큼 내 문제를 설명했다. 가능한 경우 내 바이올린 링크를 통해 이동하십시오. 이 속성으로 시도했지만 텍스트가 이미지 아래에 겹치기 때문에 이미지 아래에도 비슷한 질문이 표시되지 않습니다. 아무도 배경 이미지로 수행하지 않았습니다. 내 코드를 체크 아웃 해주십시오. 주석 상자에 입력했는지 확인하십시오. 고마워. 제발 도와 줘. :)

Answer 1

imgcontainer 내의 단락 태그에 CSS 속성을 설정하지 않았습니다.

.imgcontainer p { 
    position: relative; 
    top: 100px; 
} 

나는 또한 배경 이미지의 양쪽에 background-size 추가 : 내 바이올린에

, 나는 다음과 같은 추가. 나는 background-size: cover;이

https://jsfiddle.net/RachGal/f0fsLd2h/ (나는 내 ​​웹 사이트에 내 이미지 폴더에있는 사람과 이미지 URL을 대체) 사용 : 바이올린

Answer 2

나는 이것이 당신이 원하는 곳 이었으면 좋겠다.

.imgcontainer p { 
    position: relative; 
    bottom: -90px; 
    max-width: 100px; 
} 

사람 : 당신이 이미지에 테 배경색을 변경하는 경우 Fiddle

, 그것은 아직도 내가 단순히 추가

작동합니다 : 여기

업데이트 된 바이올린에 대한 링크입니다 문단