小编Bag*_*kri的帖子

为什么overflow-x:clip在移动浏览器上不起作用

我想在手机上裁剪我的背景，这样用户就无法水平滚动，当我在网络浏览器上使用响应式设计模式时，它工作得很好：

但是当我在手机上打开它时，它显示如下：

我知道这个问题已经被问过很多次了，但似乎没有一个解决方案对我有用。

这是我的代码：

import React from "react"
import styled from "styled-components"

const HeroBackground = () => {
  return (
    <Wrapper>
      <Background src="/images/backgrounds/hero-background.svg" />
    </Wrapper>
  )
}

export default HeroBackground

const Wrapper = styled.div`
  position: relative;
  max-width: 1440px;
  margin: auto;
  overflow-x: clip !important;
`

const Background = styled.img`
  position: absolute;
  z-index: -1;
  @media (max-width: 480px) {
    max-width: 600px;
    height: auto;
  }
`

Run Code Online (Sandbox Code Playgroud)

这是我网站的链接，以防需要：https ://trusting-bohr-a3f5b8.netlify.app/

html css reactjs styled-components

Bag*_*kri

2021 05-28

9
推荐指数

1
解决办法

8238
查看次数