CSS 基础学习-128 css 定位图像中的文本

由 hrs, 25 十月, 2021

使用top 、right、bottom、left定位图像中的文本

实例代码；

css-218.png 

<!doctype html>
<html>
 <head>
    <meta charset="utf-8">
    <style>
      div{
        margin:0;
        padding:0;
      }
        div.container{
        position:relative
        height:300px;
        width:400px;
        border:2px solid red;
        }
      img{
        opacity:0.3;
        width:400px;
        height:300px;

      }
      div.d1{
      position:absolute;
      font-size:30px;
      top:0;
      left:0;
      }
      div.d2{
        position:absolute;
      font-size:30px;
      bottom:0;
      left:0;
      }
div.d3{
        position:absolute;
      font-size:30px;
      right:0;
      top:0;
      }
      div.d4{
        position:absolute;
      font-size:30px;
      bottom:0;
      right:0;
      }
      div.d5{
      position:absolute;
      font-size:30px;
      top:45%;      
      width:100%;
      height:auto;
      text-align:center;
      }
    </style>
  </head>
  <body>
    <h1>图像文本实例</h1>
    <div class="container">
    <img src="img/R-C.jpeg" alt="dwoke" ></img>
    <div class="d1">上左</div>
    <div class="d2">下左</div>
    <div class="d3">上右</div>
    <div class="d4">下右</div>
    <div class="d5">居中</div>
    </div>
  </body>
</html>

运行效果：

css-218.png

标签

评论