CSS를 사용하여 이미지에 텍스트를 배치하는 방법
P粉696605833
2023-08-23 17:18:53
<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
반응형 크기를 사용하는 또 다른 방법은 다음과 같습니다. 텍스트를 중앙에 유지하고 상위 위치를 유지합니다. 중앙에 위치하는 것을 원하지 않는다면
absolute参数即可。请记住，主容器正在使用display: inline-block를 사용하면 더욱 쉽습니다. 작업 대상에 따라 이를 달성하는 다른 방법이 많이 있습니다.미지의 세계를 중심으로
을 바탕으로다음은 작동하는 코드펜 예제입니다
HTML
으아악CSS
으아악이런 건 어떨까요: http://jsfiddle.net/EgLKV/3/
position:absolute和z-index를 사용하여 이미지 위에 텍스트를 배치하면 완료됩니다.