我想在我的简单网页上使用背景图片.目前上传到S3,并通过CloudFront分发.

如果我包括:

<img src="https://d1z230vfguramf.cloudfront.net/Image_Assets/test-image.png">

它的显示与预期不谋而合.

使用:

<div style="background-image=url('https://d1z230vfguramf.cloudfront.net/Image_Assets/test-image.png')">
</div>

图像不可见.对于为什么会发生这种情况,有什么 idea 吗?

推荐答案

这似乎是一个关于css而不是aws的问题.你使用background-image的方式是错误的,也不会起作用.

  • 错误=>;background-image=url('https://example.com/image.png')
  • Right=>;background-image: url('https://example.com/image.png') // use colon

如果这都不起作用,那么try 在div中添加一些heightwidth,以确保这不是一个css问题.

<div style="height: 200px;width: 200px; background-image:url('https://d1z230vfguramf.cloudfront.net/Image_Assets/test-image.png');">
</div>

Html相关问答推荐

当ul为Flex时,使ul元素在指定高度内可垂直滚动

如何防止SVG图标出现断行?

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

如何才能只给没有孟加拉语Kar符号的字母上色?

为所有必填字段添加所需的占位符文本(Angular Material)

如何更改计时器S输入的Angular 字体大小?

当光标悬停在(相同)父元素上方时,为多个子元素创建不同的过渡动画

每个元素的CSS网格高度相等,以保持响应性

如何保持嵌套进度条的背景色?

渐变进度条位置

SVG的动态CSS

我如何确保我的网格永远不会小于它的子网格

如果最后一行的卡数少于其他行,则在使用flex grow使卡在调整大小时拉伸后,flex卡的宽度将被拉伸

带有排序元素的 CSS 网格

为什么 CSS 网格超出了父级?

为什么即使我点击其他地方,我的 contenteditable="true" 也会被激活?

发送带有图像的Google文档作为HTML格式的邮件正文不再起作用

为什么 `html` 上的 overflow: hidden 将滚动框移动到正文?

如何自定义具有白色透明背景的光标图像?

文本输入在 Chrome 中保持水平滚动,带有文本溢出:省略号