代码之家 › 专栏 › 技术社区 › Paddy Hallihan

CSS-使div适合整个背景图像[duplicate]

css html

-1

Paddy Hallihan · 技术社区 · 8 年前

div{
  background-image:url(https://via.placeholder.com/350x150);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* height 100%; */
  text-align:center;
}

<div> 
Some content
</div>

我知道我也可以加一个 <img> <div> 但是这里面有很多内容需要浮动来覆盖图像。

我不介意使用JS/jQuery来解决这个问题。

1 回复 | 直到 7 年前

-1

user85602 8 年前

为了使某个东西适合屏幕的全高,而不是像使用vh那样使用100%宽度,所以在您的例子中:

height: 100vh;

这将根据用户的屏幕尺寸动态工作,您可以阅读更多关于这方面的信息,也可以查看示例 here

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前