배경 이미지 위에 텍스트를 배치하는 기술

소개 웹 사이트 http://startbootstrap.com/templates/grayscale/에서 소개 텍스트를 배경 이미지 위에 배치하십시오. 이 경우 - 그들은배경 이미지 위에 텍스트를 배치하는 기술

.intro { display: table; width: 100%; height: auto; padding: 100px 0; text-align: center; color: #fff; background: url(../img/bg.jpg) no-repeat bottom center scroll; background-color: #000; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }

는 물론 절대 위치를 사용하는 것이 달성하지만, 모바일 첫 번째 방법을 복용하는 또 다른 방법은 텍스트를 표시하는 테이블을 사용 - 내가 아는 궁금에게 어떤 것 모범 사례를 유지하면서 가장 가벼운 솔루션 (최소 CSS)

출처

2014-04-14 Jedda

:) –

나는 그것이 배경이라고 생각한다. URL 스타일링이 그 핵심이다. 그래도 DIV에서 사용할 수 있습니다. 나머지 스타일은 div 자체 (텍스트 색상/div 크기)에 관한 것입니다.

여기에 미니멀 한 예이다 -이 내 안드로이드 휴대 전화에서 잘 작동 : 그래서 우리는 당신의 예를 주변에 바이올린 수 있습니다 당신은 바이올린을 만들어야합니다

<html> 
<head> 
<style type="text/css"> 
div { 
    background: url(http://www.thewebbery.co.uk/Web04/SKP/Files/PITP1.jpg); 
    color:#FFFFFF; 
    width:900; 
    height:600; 
} 
</style> 

</head> 
<body> 
<div> 
Here's some text over an image 
Some more over an image Here's some text over an image 
Some more over an image Here's some text over an image 
Some more over an image Here's some text over an image 
Some more over an image Here's some text over an image 
Some more over an image Here's some text over an image 
Some more over an image 

</div> 
</body> 
</head>

출처

2014-04-14 10:21:21 user2808054

배경 이미지 위에 텍스트를 배치하는 기술

답변

관련 문제