我有我的背景图片,上面覆盖了一些文字。
我正在尝试使文本更小,但是当我使用 CSS 调整文本大小时
.titleSize{
font-size: 0.8em;
}
它最终调整了整个背景图像的大小
这是Github上的最小可重现示例。
您必须使用yarn install
or安装节点模块,npm install
然后在浏览器中运行gatsby develop
并查看网页localhost:8000
注意:如果您将 textClass='small' 更改为 textClass='big',请对 textClass='small' 的所有 3 个实例执行此操作以查看大小更改
这是我正在使用的代码
import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"
import BackgroundImage from 'gatsby-background-image'
import '../style.css'
const BgImage = ({className, imgProps, textClass}) => (
<Link className={className} to='#'>
<BackgroundImage
Tag="section"
role="img"
className='bgImage'
fluid={imgProps}
backgroundColor={`#040e18`}
>
<div className='outer'>
<h2 className={textClass}>How was the math test?</h2>
</div>
</BackgroundImage>
</Link>
)
const IndexPage = () => {
const data = useStaticQuery( graphql`
query MyQuery {
allImageSharp {
edges {
node {
fluid {
sizes
src
srcSet
srcSetWebp
}
}
}
}
}
`)
const imgProps = data.allImageSharp.edges[2].node.fluid
return (
<div className='container'>
<div className='my-grid'>
<BgImage className='un' textClass='small' imgProps={imgProps} />
<BgImage className='du' textClass='small' imgProps={imgProps} />
<BgImage className='twa' textClass='small' imgProps={imgProps} />
</div>
<div className='my-grid'>
<BgImage className='un' textClass='big' imgProps={imgProps} />
<BgImage className='du' textClass='big' imgProps={imgProps} />
<BgImage className='twa' textClass='big' imgProps={imgProps} />
</div>
</div>
)
}
export default IndexPage
.container{
width: 100%;
display: flex;
}
.beside{
width: 50%;
}
.my-grid{
height: 400px;
display: grid;
grid-gap: 10px;
grid-template: repeat(3, 1fr) / repeat(2, 1fr);
grid-template-areas:
"u u"
"u u"
"d t";
width: auto;
padding: 20px;
}
.un{
grid-area: u;
}
.du{
grid-area: d;
}
.twa{
grid-area: t;
}
.bgImage{
width: 100%;
height: 100%;
}
.small{
margin-top: auto;
font-size: 0.8em;
}
.big{
margin-top: auto;
}
.outer{
display: flex;
height: 100%;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
text-align: right;
}