时间戳

首页 > 解决方案 > 在 Gatsby 中使用带有 imgStyle 的 CSS

html - 在 Gatsby 中使用带有 imgStyle 的 CSS

问题描述

有没有办法将 CSS 与gatsby-image'imgStyle属性一起使用？

例如，我希望能够做类似的事情

<!--In the HTML -->
<Img className="squiggle" fluid={data.squiggle.childImageSharp.fluid}/>

和

/*In the CSS */
.squiggle {
    position: absolute;
    left:-100px;
    width:465px;
    height:282px;
}

我不喜欢必须做类似的语法

<Img imgStyle={{
    position: "absolute",
    left:"-100px",
    width:"465px",
    height:"282px",
    }}
    fluid={data.squiggle.childImageSharp.fluid}/>

标签： htmlcssgatsbygatsby-image

解决方案

当然可以，您的初始方法是完全有效的：

但是，您必须记住，使用gatsby-image将图像包裹在一系列嵌套<div>中，其中包括模糊效果。所以你可能需要添加一些额外的规则。此外，gatsby-image使用一些内联样式，以便它们在您的 CSS 文件中具有优先权，您可能需要使用!important规则来覆盖它。

例如，您提供的结构将输出：

<div class="squiggle gatsby-image-wrapper" style="position: relative; overflow: hidden; display: inline-block; width: 400px; height: 400px;"><img aria-hidden="true" src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQCA//EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAGbvqebrTh3CFdgn//EAB4QAAIBAwUAAAAAAAAAAAAAAAECEQADEBITISIx/9oACAEBAAEFAkPKu2ugu0Ce8ti6YUef/8QAGREAAgMBAAAAAAAAAAAAAAAAAAIQESFC/9oACAEDAQE/AVXCjmP/xAAYEQACAwAAAAAAAAAAAAAAAAABEAIhQf/aAAgBAgEBPwGRtav/xAAfEAACAQMFAQAAAAAAAAAAAAAAATEQIVECERJBYYH/2gAIAQEABj8C8OOtL5Rw98FuiUS5LZp//8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFRYfH/2gAIAQEAAT8hV7DZgQpiogs8kq6Qvfkz5ELHk9McjFpZu1s//9oADAMBAAIAAwAAABA050D/xAAYEQEAAwEAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxDb1ZOkv//EABgRAQADAQAAAAAAAAAAAAAAAAABETFB/9oACAECAQE/EMC3KH//xAAeEAEBAAICAgMAAAAAAAAAAAABEQAhMXFBUYGx4f/aAAgBAQABPxAMhqKuvU+VwW/heOnLhMEC8ACCuNTSixgb4mJ+Tv8AeGlaRyWBPvEx2wcqOXZTvP/Z" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0;"><picture><source type="image/webp" srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6a64a/some-image-name.webp 1x,
/static/9f5c7a959032e5fe2cba348695d4cee8/ab687/some-image-name.webp 1.5x,
/static/9f5c7a959032e5fe2cba348695d4cee8/88bdf/some-image-name.webp 2x"><source srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg 1x,
/static/9f5c7a959032e5fe2cba348695d4cee8/7b2a1/some-image-name.jpg 1.5x,
/static/9f5c7a959032e5fe2cba348695d4cee8/d1f84/some-image-name.jpg 2x"><img srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg 1x,
/static/9f5c7a959032e5fe2cba348695d4cee8/7b2a1/some-image-name.jpg 1.5x,
/static/9f5c7a959032e5fe2cba348695d4cee8/d1f84/some-image-name.jpg 2x" src="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg" alt="" width="400" height="400" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: none 0s ease 0s;"></picture><noscript><picture><source type='image/webp' srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6a64a/some-image-name.webp 1x,
/static/9f5c7a959032e5fe2cba348695d4cee8/ab687/some-image-name.webp 1.5x,
/static/9f5c7a959032e5fe2cba348695d4cee8/88bdf/some-image-name.webp 2x" /><source srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg 1x,
/static/9f5c7a959032e5fe2cba348695d4cee8/7b2a1/some-image-name.jpg 1.5x,
/static/9f5c7a959032e5fe2cba348695d4cee8/d1f84/some-image-name.jpg 2x" /><img loading="lazy" width="400" height="400" srcset="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg 1x,
/static/9f5c7a959032e5fe2cba348695d4cee8/7b2a1/some-image-name.jpg 1.5x,
/static/9f5c7a959032e5fe2cba348695d4cee8/d1f84/some-image-name.jpg 2x" src="/static/9f5c7a959032e5fe2cba348695d4cee8/6e63d/some-image-name.jpg" alt="" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div>

注意：这是我为这个答案制作的一个例子。这只是一个近似值，路径可能不同，但主要结构不会

如您所见，您的类名位于外部包装器中，因此为了达到您想要的效果，您需要指向一些内部 HTML 标记，例如<img>，创建一个选择器，例如：.squiggle img{}。

推荐阅读