찾다

집  >  Q&A  >  본문

CSS를 사용하여 이미지에 텍스트를 배치하는 방법

<p>CSS에서 이미지 위에 텍스트를 배치하는 방법은 무엇입니까? </p> <pre class="brush:php;toolbar:false;"><div class="image"> <img src="sample.png"/> <div class="text"> <h2>일부 텍스트</h2> </div>
<p>아래와 같은 작업을 하고 싶지만 막혔습니다. 현재 CSS는 다음과 같습니다</p> <pre class="brush:php;toolbar:false;"><style> .이미지 { 위치: 상대; } h2 { 위치: 절대; 상단: 200px; 왼쪽: 0; 너비: 100%; 여백: 0 자동; 너비: 300px; 높이: 50px; } <p>배경 이미지를 사용할 때 html2pdf에서 어떤 출력도 얻지 못합니다: </p> <pre class="brush:php;toolbar:false;"><style> #이미지_컨테이너{ 너비: 1000px; 높이: 700px; 배경 이미지:url('switch.png'); } </스타일> <a href="prints.php">인쇄</a> <?php ob_start() ?> <div id="image_container"></div>
P粉696605833P粉696605833459일 전452

모든 응답(2)나는 대답할 것이다

  • P粉041856955

    P粉0418569552023-08-24 13:48:16

    반응형 크기를 사용하는 또 다른 방법은 다음과 같습니다. 텍스트를 중앙에 유지하고 상위 위치를 유지합니다. 중앙에 위치하는 것을 원하지 않는다면 absolute 参数即可。请记住，主容器正在使用 display: inline-block를 사용하면 더욱 쉽습니다. 작업 대상에 따라 이를 달성하는 다른 방법이 많이 있습니다.

    미지의 세계를 중심으로

    을 바탕으로

    다음은 작동하는 코드펜 예제입니다

    HTML

    으아악

    CSS

    으아악

    회신하다
    0
  • P粉349222772

    P粉3492227722023-08-24 09:07:10

    이런 건 어떨까요: http://jsfiddle.net/EgLKV/3/< /p>

    position:absolute 和 z-index를 사용하여 이미지 위에 텍스트를 배치하면 완료됩니다.

    으아악 으아악

    회신하다
    0
  • 취소회신하다