0
그래서 지난 한 시간 동안 CSS 속성 position을 사용하여이 이미지를 이동하려고했습니다. 내 문제는 top 또는 bottom을 사용하여 이동할 때마다 제대로 작동하지 않습니다. 다음은 해당 속성 및 after을 사용하는 before의 스크린 샷입니다. 아래에서 당신은 내 html & CSS를 찾을 수 있습니다. 마지막으로이 position은 absolute이어야하며 그렇지 않으면 이미지가 완전히 사라집니다.이미지를 CSS로 옮기기
HTML
<section class="row posts">
<div class="col-md-6 col-md-offset-3">
<header><h3>What others have to say...</h3></header>
@foreach($posts as $post)
<article class="post" data-postid="{{ $post->id }}">
<p>{{ $post->body }}</p>
<div class="info">
Posted by {{ $post->user->user_name }} on {{ $post->created_at }}
</div>
<div class="interaction">
<a href="#" class="like heart"></a> |
<a href="#" class="like">Dislike</a>
@if(Auth::user() == $post->user)
|
<a href="#" class="edit">Edit</a> |
<a href="{{ route('post.delete', ['post_id' => $post->id]) }}">Delete</a>
@endif
</div>
</article>
@endforeach
</div>
</section>
CSS
.heart{
background: url('http://localhost:8079/uncaughterror/public/src/img/web_heart_animation.png');
background-position: left;
background-repeat: no-repeat;
height: 50px; width: 50px;
cursor: pointer;
position: absolute;
left: 12px;
bottom: 5px; //This or 'top' is what causes my entire problem
background-size:1450px;
}
.heart:hover {
background-position: right;
}