H1 텍스트를 로고 이미지로 바꾸기

내 사이트 로고가 HTML 및 CSS가있는 내 페이지에서 H1 요소로 표시되도록하고 싶습니다. 또한 CSS를 사용하여 내 페이지에 맞게 이미지를 작게 만들 필요가 있습니다. 어떻게이 일을 할 수 있습니까?H1 텍스트를 로고 이미지로 바꾸기

아무도 도와 줄 수 있습니까? 사전에

감사합니다, 캘럼

출처

2011-04-25 Cosmo Posmo

로고 이미지이며, H1은 텍스트의 스타일입니다. 당신은 명확히 할 수 있습니까? – neebz

나는 당신의 질문이 정확히 무엇인지 모르겠습니다. 기본 아이디어는 '

'입니다.하지만 텍스트 콘텐트를 포함하도록 설계된 의미 적 요소 인만큼 질문이 얼마나 큰 의미인지는 알 수 있습니다. –

그래서 모든 페이지마다 같은 H1을 가지고 있습니까? 그게 현명한거야? –

그건 당신이 할 수있는 방법은 다음과 같습니다

HTML :

<h1 class="logo">My Company</h1>

CSS :

h1.logo{ 
    display:block; 
    width: 300px; 
    height: 200px; 
    background: url(images/logo.png) 0 0 no-repeat; 
    text-indent: -20000px; 
}

출처

2011-04-25 17:11:23

몇 가지 무료 온라인 도구로 이미지의 크기를 조정할 수 있습니다. –

글쎄, 배경 이미지로 설정할 때 이미지 너비/높이를 설정할 수는 없지만 포토샵과 같은 도구가 있으면 이미지 크기를 설정할 수 있습니다. 다음과 같은 온라인 서비스를 사용할 수 있습니다 : http://www.resizeyourimage.com/ http://www.picresize.com/ –

HTML :

<h1 class="logo">My Logo Text for SEO</h1>

CSS : 당신은 CSS에서 이미지 요소의 배경을 설정할 수 있습니다

.logo { background:url(path/to/image.gif) 0 0 no-repeat; display:block; height:50px; overflow:hidden; text-decoration:none; text-indent:-9999em; width:50px; }

출처

2011-04-25 17:10:21 Seth

h1 
{ 
    background-image: url('Images/Logo.png'); 
    background-repeat: no-repeat; 
}

h1 태그에 id를 할당하고 css에서 id로 요소를 참조하거나 두 개 이상의 h1 태그에 적용 할 수있는 클래스를 사용하는 것이 좋습니다.

출처

2011-04-25 17:11:18 toby

<h1 style="background-image:url('file.jpg')"></h1>

출처

2011-04-25 17:11:36 Novikoff

'h1' 요소의 크기를 설정하는 것이 있어야합니다. 그렇지 않으면 너무 작습니다 . –

H1 텍스트를 로고 이미지로 바꾸기

답변

관련 문제