时间戳

首页 > 解决方案 > 调整大小时，文本不会在文本上保持固定

html - 调整大小时，文本不会在文本上保持固定

问题描述

我尝试将像素更改为百分比，我尝试将图像作为背景图像，但它仍然无法正常工作。在这一点上，我迷路了。此外，我正在使用一个我忘记包含的动画，它位于比例为 1.1 的“a”元素上；

预习 - https://codepen.io/jontabshi/pen/oNgVaqZ

HTML

 <div class="button-contact">
        <a href="#" alt="contact">
        <img src="https://00.rc.xiniu.com/g1/M00/1E/4D/CgAGTF1BQzWALqT4AApMEzKQS6Y824.jpg" alt="contact button"/>
        <h2>What are you waiting for?</h2>
        <p>Many opportunities wait for you at Web Design and<br>Programming, get in touch now.</p>
        </a>

CSS

/* Layout */

.button-contact {
    padding-top: 50px;
    display: grid;
    justify-content: center;
}

.button-contact img:first-of-type {
    max-width: 100%;
}

.button-contact h2,.button-contact p,.button-contact #white-button {
    position: absolute;
}

.button-contact h2 {
    bottom: 140px;
    left: 360px;
}

.button-contact p {
    bottom: 80px;
    left: 363px;
}

#white-button {
    right: 350px;
    bottom: 125px;
}

/* Styles */

.button-contact img:first-of-type {
    filter: brightness(40%);
    -webkit-filter: brightness(40%);
}

.button-contact h2 {
    font-family: Bebas, sans-serif;
    color: white;
    font-weight: 100;
    font-size: 71px;
}

.button-contact p {
    font-family: Roboto, sans-serif;
    color: white;
    font-weight: 100;
    font-size: 25px;
}

请帮忙。我会很感激的。谢谢你。:)

标签： htmlcss

解决方案

想通了它只是这个

.button-contact{
    margin-left:auto;
    margin-right:auto;
    width:(picture width) px;
}

推荐阅读