时间戳

首页 > 解决方案 > 有没有更好的方法将此背景图像与其上方的文本对齐？

css - 有没有更好的方法将此背景图像与其上方的文本对齐？

问题描述

我正在尝试使用多个媒体查询将背景图像（右侧的灰色圆圈）与其上方的文本对齐，但我没有取得多大成功。我可以进行更多的媒体查询，但我只是想知道是否有更智能、更自动化的方法来做到这一点。

这是页面：https ://veritywebsvs.com/wmjw/ 我需要让右侧的灰色圆圈与上面的文本居中，如前所述。

这是我用来尝试使圆居中的 CSS：

#hero .fl-node-60bfc0dd0afeb > .fl-row-content-wrap {
    background-image: url(circles-2-gray-trans.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-attachment: scroll;
    background-size: cover;
    border-width: 0;
    background-clip: border-box;
    min-height: 650px;
}
#hero > .fl-row-content-wrap {
    background-size: 60vw;
}

@media (min-width: 1920px) {
    #hero > .fl-row-content-wrap {
        background-position: 95% center;
    }
}
@media (min-width: 1100px) and (max-width: 1919px) {
    #hero > .fl-row-content-wrap {
        background-position: 110% center;
    }
}
@media (min-width: 992px) and (max-width: 1099px) {
    #hero > .fl-row-content-wrap {
        background-position: 120% center;
        background-size: 75vw;
    }
}
@media (max-width: 991px) {
    #hero > .fl-row-content-wrap {
        background-position: 130% center;
        background-size: 80vw;
    }
}

标签： css

解决方案

与其使用背景图像并尝试将图像放置在正确的位置，<img>不如在使用负边距的情况下使用并将其放置在任何您想要的位置position: relative，或者top, bottom, right, left positioning如果使用position: absolute. 连同用于z-index正确分层图像的用途。

添加一个 div 和 img 就像我在此处添加的一样，它将解决您当前的定位问题。

https://www.w3schools.com/css/css_positioning.asp

.for-bg {
  width: 1080px;
  margin-top: -1050px;
  max-width: revert;
  right: 150px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-right: -300px;
  margin-bottom: -630px;
}
<div class="fl-module fl-module-rich-text fl-node-60c015378acf7" data-node="60c015378acf7">
  <div class="fl-module-content fl-node-content">
    <div class="fl-rich-text">
      <p>WMJW has been serving clients<br>
        <span style="color: #ca9130;">for ___ years</span><br> and ________.</p>
    </div>
  </div>
</div>
<div><img src="https://veritywebsvs.com/wmjw/wp-content/uploads/2021/06/circles-2-gray-trans.svg" class="for-bg"></div>

推荐阅读