css - 为什么canva的透明图片不会显示在我的网站上？

Question

我为餐厅制作了一个网站，我需要从canva插入一个透明的标志，但添加后它不会显示。这很奇怪，因为当我尝试使用不是来自 Canva 的其他图像时，它正在工作。问题是什么？

图像是 png 格式，但我已经尝试过 jpg 格式，也没有发生任何事情。我什至添加了带有背景的图像，但没有一个有效。

似乎不是代码问题，因为正如我所说的来自其他来源的图片，而不是 canva 通常显示的图片，但也许。

更改文件名解决不了任何问题。

import styled from 'styled-components'

import LogoImage from '../images/Super Sogbu (3).png'

const Logo = styled.img `
position: absolute;
top: 5vh;
left: 5vh;
width: 10%;
height: 10vh;
margin: 0;
padding: 0;
background-image: url(${LogoImage}) no-repeat center center fixed;
color: black;
`;

export default Logo;

这是我在这里的第一个问题，所以我不知道我应该如何描述这个问题，但我希望你明白我的意思。

标签： cssreactjsimagegatsbystyled-components

Answer 1

这看起来像无效的CSS。它应该是：

background-image: url(${LogoImage});
background-repeat:no-repeat;
background-position: center center;
background-attachment: fixed;

或者

background: url(${LogoImage}) no-repeat center center fixed;