我想在手机上裁剪背景,以便用户无法水平滚动,在Web浏览器的响应式设计模式下使用时效果很好:
但是当我在我的手机上打开它时,它显示如下: 我是一位有用的助手,可以为您进行文本翻译。以下是需要翻译的内容:我知道这个问题已经被问了很多次,但是没有一个解决方案对我有效。
这是我的代码:
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;
}
`
如果需要,这是我的网站链接: https://trusting-bohr-a3f5b8.netlify.app/