Bootstrap 使用z索引时调整图像大小时出现问题

lvmkulzt  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(151)

当我不指定部分的位置时,手机图像完全符合指定的宽度。

也就是-width: 60%;

但是,当我将positionz-index应用到前两个部分时,width: 60%;没有得到应用,因为手机图像变得太大了。

HTML和CSS代码:

第一个

我希望最终结果是这样的:

x1c4d 1x指令集

  • 手机图片:*

chhkpiq4

chhkpiq41#

嘿,伙计,我真的不知道这是不是正确的方法,但它似乎工作得很好。我所做的是改变宽度的最大宽度,使它从60%到18%。它看起来不错,像教训。然后当你切换到平板电脑或移动的,我让@media函数将其更改回60%,这样它就不会一直缩小,看起来很奇怪。如果我解释正确的话,可以使用idk,但代码如下:

.title-image {
      max-width: 18%;
      transform: rotate(25deg);
      position: absolute;
      right: 22%;
      }

      @media (max-width: 991px) {
       .title-image {
       position: static;
       transform: rotate(0deg);
       max-width: 60%;
        }
         }

我是一个完全的初学者喜欢你,但我希望这有助于以任何方式。

sczxawaw

sczxawaw2#

你只需要设置第一个section的position就可以了,如果你设置了titleposition: relative;z-index: -1;,你就不需要在你的.title-image类上设置位置了。
下面是代码片段的结果:

第一个
您可以熟悉css position属性here
我不会包括任何@media查询,因为它不是问题的一部分。

相关问题