이미지 위에 절대 위치가있는 텍스트

오른쪽 하단 모서리에 태그를 추가해야하는 이미지가 있습니다.이미지 위에 절대 위치가있는 텍스트

내가 거기에 퍼팅 할 때, 이미지 아래 4px이고 패딩이나 여백이 없습니다.

.postImage { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.post img.thumbnail { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
.commercial { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #666; 
 
    color: #fff; 
 
    padding: 3px; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
}

<div class="postImage"> 
 
    <img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff"> 
 
    <span class="commercial">commercial</span> 
 
</div>

를 해결하는 가장 좋은 방법은 무엇입니까 ? 나는 생각하지 않는다

bottom: 4px;

이 맞다.

는 인라인 요소이기 때문에 바닥에 약간의 여분의 공간을 기본 이미지 태그함으로써

출처

2017-05-04 David

가 바로 이러한 목적으로 사용되므로 또한 캡션에 대한 래퍼와'

'에 대한''

를 사용할 수 있습니다. – MateBoy

감사드립니다. 여분의 공간

.thumbnail { 
    display: block; /*inline-block, float:left etc..*/ 
}

.postImage { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.post img.thumbnail { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
.commercial { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #666; 
 
    color: #fff; 
 
    padding: 3px; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
} 
 
.thumbnail { 
 
    display: block; 
 
}

<div class="postImage"> 
 
    <img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff"> 
 
    <span class="commercial">commercial</span> 
 
</div>

출처

2017-05-04 08:52:42

그건 정답이야, 나 한테 이겼어. –

@Marcos Pérez Gude thanks –

그냥 클래스를 축소판 display: block;를 추가를 제거 block 요소로 변경합니다.

.postImage { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.post img.thumbnail { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
.commercial { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #666; 
 
    color: #fff; 
 
    padding: 3px; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
} 
 
.thumbnail { 
 
    display: block; 
 
}

<div class="postImage"> 
 
    <img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff"> 
 
    <span class="commercial">commercial</span> 
 
</div>

img 기본 디스플레이가 inline 것은 사실이고 작동 display:block로 변경하여,하지만 당신은 change display 원하는 don't 경우 다음 vertical-align:bottom을 추가 할 수 있습니다

출처

2017-05-04 08:54:02

이것은 아무것도 바뀌지 않는다! –

죄송합니다. 잘못된 요소 ... –

업데이트 된 답변 : –

.postImage { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.postImage img.thumbnail { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 

 
.commercial { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #666; 
 
    color: #fff; 
 
    padding: 3px; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
}

<div class="postImage"> 
 
    <img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff"> 
 
    <span class="commercial">commercial</span> 
 
</div>

출처

2017-05-04 08:55:37 athi

요소를 bottom line에 맞 춥니 다. f parent div 다음과 같습니다. 예 하단 : 0은 .commercial이 절대 위치로 설정되어 있기 때문에 잘 작동합니다.

.postImage { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.post img.thumbnail { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
.commercial { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #666; 
 
    color: #fff; 
 
    padding: 3px; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
} 
 
img{ 
 
    vertical-align:bottom; 
 
}

<div class="postImage"> 
 
    <img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff"> 
 
    <span class="commercial">commercial</span> 
 
</div>

출처

2017-05-04 09:00:35 frnt

이미지 위에 절대 위치가있는 텍스트

답변

관련 문제