before after 가상클래스(도형과 버튼 만들기, 포지션 활용) 01 강의 중 이미지 안 뜨는 문제요ㅠ.ㅠ
673
작성한 질문수 1
23:33분에 background:url(images/...) no-repeat;
부분이 있는데 다른 사진 넣으면 뜨는데 카카오톡 이미지만 넣으면 뜨지 않아서 문의 글 남깁니다ㅜㅡㅜ
답변 2
0
보실지는 모르겠지만 저도 같은 문제로 해결방법을 찾아보다가 발견했습니다
아마 이미지 크기가 40px 50px로 담아 지지가 않아서 생기는 문제 같습니다 400px 500px로 변경하시면 해당 이미지가 보이실겁니다 작은이미지로 사용하시던지 아니면 background-size : cover;속성을 주시면 될거같습니다
0
background-size : cover; 가 없어서 큰 이미지의 왼쪽 구석만 보여서 이미지가 안나온다고 생각할 수도 있겠네요. 질문 하셨던 분이 혹시 이 글을 다시 보시면 background-size : cover;를 넣어주세요. 이미지 경로가 맞다면 나올거에요.
0
캡쳐 이미지로는 원인이 확인이 안되네요.
html, css 코드를 복사해서 올려주세요.
0
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div class="section-header">
<h3>정말 쉽고 간단합니다.</h3>
<h1><span>카톡</span> 간편 회원가입 후 <b>카드매출 관리를 무료</b> 이용해보세요.</h1>
</div>
</body>
</html>0
css
*{
box-sizing:border-box;
outline:none
}
body{
margin: 30px;
background-color: #f8f8f8;
}
.section-header{
text-align: center;
}
.section-header h3{
color:darkorange;
font-weight:500;
font-size:25px;
}
.section-header h1{
font-weight:normal;
}
.section-header h1 span{
border: 1px solid #000;
position:relative;
}
.section-header h1 span:before{
content:'';
background:url(/images/face\ copy.png) no-repeat;
width: 40px;
height: 40px;
position:absolute;
}0
이미지 파일명과 경로만 맞으면 잘 나옵니다.
올리신 css 코드에 이미지 경로가 이상하네요.
그리고 /images 로 시작하는 절대주소 쓰지마시고 images 이렇게 상대주소 사용하세요.
0
.section-header h1 span:before{
content:'';
background:url(images/kakao.png) no-repeat;
width: 40px;
height: 40px;
position:absolute;
}
이렇게 변경 했는데도 이미지가 안 뜨고 있습니다 ㅠㅠ
0
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div class="section-header">
<h3>정말 쉽고 간단합니다.</h3>
<h1><span>카톡</span> 간편 회원가입 후 <b>카드매출 관리를 무료</b> 이용해보세요.</h1>
</div>
</body>
</html>0
*{
box-sizing:border-box;
outline:none
}
body{
margin: 30px;
background-color: #f8f8f8;
}
.section-header{
text-align: center;
}
.section-header h3{
color:darkorange;
font-weight:500;
font-size:25px;
}
.section-header h1{
font-weight:normal;
}
.section-header h1 span{
border: 1px solid #000;
position:relative;
}
.section-header h1 span:before{
content:'';
background:url(../images/img_01.png) no-repeat;
width: 40px;
height: 40px;
position:absolute;
top: -30px;
right: 0;
}0
일단 경로에 문제가 있을거에요.
아래 2개 경로만 맞으면 잘 나올거에요. before 부분은 문제 없습니다.
<link rel="stylesheet" href="css/stylesheet.css">
background:url(../images/img_01.png) no-repeat;
강의 내용 관련 문의드립니다 (animation)
1
55
2
Grid 수직정렬 제대로 안됩니다.
1
72
1
강의 화면이 안나옴
1
208
1
로그인 폼 CSS 디자인 코드 질문 있습니다.
1
235
1
inherit와 100%의 차이가 궁금합니다.
1
322
2
<br>태그 사용 빈도를 줄이게 될 경우의 질문입니다.
1
201
1
수업자료는 없나요?~
1
325
1
[공유] 부모 요소가 position: absolute 인 경우에 대한 설명
1
663
1
float: right 요소가 아래에 배치되는 이유 쉽게 설명
1
863
1
안녕하세요 가상클래스 포지션 활용 질문드립니다
1
386
2
hover 가상클래스 ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 강의중
3
460
2
nav 태그
1
1129
1
css 선택자의 모든-선택자 우선순위가 중요한 이유 강의 내용중에서
1
545
1
강의자료는 어디서 받을 수 있나요?
1
348
1
유튜브 영상 파일
1
300
1
모바일 css 작업(단위)
1
295
1
유튜브의 초급,중급 이론과는 어떤차이가 있나요?
1
260
1
선생님 질문이 있습니다. (float 속성)
1
262
1
파일다운로드와 관련하여
1
256
1
포지션(position) 속성(z-index와 포지션 속성 우선순위) 강의 질문있습니다.
1
401
1
오타(contaner)
1
241
1
float 속성을 설정했을 때 display: inline-block이 되는 것에 관련하여 질문이 있습니다.
1
2281
2
margin: auto;
1
354
1
label 태그의 사용법이 궁금합니다
1
352
2