Question

我需要在透明图像中显示文字，类似于使用画笔绘制的区域。所以我切边，共有8个，左上角，中上角，右上角剩下对左下角，中下角，右下角

介于两者之间的文字。有人能建议我在这里缺少什么吗？

附上截图供参考。注意文本周围的白线。

添加HTML代码

<html>
    <head>
        <meta charset="utf-8">
        <title>Banner Test</title>
        <style>
            
            .banner-content {
              position: absolute;
              top: 50%;
              transform: translate(-50%,-50%);
              width: 70%;
              left:50%;
            }
            .banner-content .top {
              background-image: url("img/Paintstrip-subhead_topmiddle.png");
              background-position: top center;
              background-repeat: repeat-x;
              min-height: 21px;
              position: relative;
              top: 0;
              float: left;
              width: 100%;
              display: block;
            }
            .banner-content .top:before {
              background-image: url("img/Paintstrip-subhead_topleft.png");
              background-position: top left;
              left: -50px;
              background-repeat: no-repeat;
              content: '';
              position: absolute;
              top: 0;
              width: 50px;
              height: 100%;
            }
            .banner-content .top:after {
              background-image: url("img/Paintstrip-subhead_topright.png");
              background-position: top right;
              right: -50px;
              background-repeat: no-repeat;
              content: '';
              position: absolute;
              top: 0;
              width: 50px;
              height: 100%;
            }
            .banner-content .middle {
              position: relative;
              background-color: rgba(137, 38, 120, 0.85);
              float: left;
              width: 100%;
              display: block;
              text-align: center;
              color: #fff;
            }
            .banner-content .middle h1 {
                font-size: 35px;
            }
            .banner-content .middle::before {
              background-image: url("img/Paintstrip-subhead_leftmid1.png");
              left: -50px;
              background-repeat: no-repeat;
              content: '';
              position: absolute;
              top: 0;
              width: 50px;
              height: 100%;
              background-repeat: repeat-y;
              background-position: left center;
            }
            .banner-content .middle::after {
              background-image: url("img/Paintstrip-subhead_rightmid1.png");
              right: -50px;
              background-repeat: no-repeat;
              content: '';
              position: absolute;
              top: 0;
              width: 50px;
              height: 100%;
              background-repeat: repeat-y;
              background-position: right center;
            }
            .banner-content .bottom {
              background-image: url("img/Paintstrip-subhead_bottom1.png");
              background-position: bottom center;
              background-repeat: repeat-x;
              min-height: 31px;
              position: relative;
              z-index: -1;
              top: 0;
              float: left;
              width: 100%;
              display: block;
            }
            .banner-content .bottom:before {
              background-image: url("img/Paintstrip-subhead_bottomleft.png");
              background-position: bottom left;
              left: -50px;
              background-repeat: no-repeat;
              content: '';
              position: absolute;
              top: 0;
              width: 50px;
              height: 100%;
            }
            .banner-content .bottom:after {
              background-image: url("img/Paintstrip-subhead_bottomright.png");
              background-position: bottom right;
              right: -50px;
              background-repeat: no-repeat;
              content: '';
              position: absolute;
              top: 0;
              width: 50px;
              height: 100%;
            }
        </style>
    </head>
    <body>
        <section class="banner-content">
            <div class="top"></div>
            <div class="middle">
                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
            </div>
            <div class="bottom"></div>
        </section>
    </body>
</html>

Answer 1

我发现了这个问题。

transform: translate(-50%,-50%);

变换导致这些线条出现。所以我只需要删除它然后重新应用上边距。

在各种图像之间添加未知空间

1 个答案: