时间戳

首页 > 解决方案 > 如何在不破坏其他 CSS 属性的情况下正确地将 CSS 中的 background-image 属性转换为 HTML 代码？

html - 如何在不破坏其他 CSS 属性的情况下正确地将 CSS 中的 background-image 属性转换为 HTML 代码？

问题描述

我首先在 div 中使用“background-image”CSS 属性来显示图像，因为它可以按照我的需要正确显示：

  1. 图像位于导航栏下方（允许显示阴影）。
  2. 图像是边到边的，但根据用户屏幕尺寸仅能容纳不到 30% 的屏幕高度。
  3. 图像允许半透明覆盖图像的标题和描述。
  4. 图像将填充（裁剪）以适合画布，而不是拉伸或收缩。

如何将“背景图像”CSS 属性作为标记传输到 HTML？由于 CSS 不支持替代文本，因为它们是我通过考试所必需的。

我试图在 HTML 中添加一个标签，并从 HTML 中删除了 background-image 属性（也是规则集名称以适应添加的 img 标签）但是，它并没有像我想要的那样正确显示它。

== 代码 ==

旧代码：
CSS：

.image-container {
    padding-top: 10px;
    width: 100%;
    height: 48vw;
    min-height: 380px;
    max-height: 550px;
    background-image: url('/assests/DisplayImage.jpg');
    background-size: cover;
    position: relative;

.image-container .detail {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 0;
    text-align: center;
}

HTML：

    <div class="image-container">
        <div class="=detail">
            <h1>
                Title text
            </h1>
            <h3>
                Description
            </h3>
        </div>
    </div>

新代码：
HTML：

    <div class="image-container">
      <img scr=/assests/DisplayImage.jpg>
        <div class="=detail">
            <h1>
                Title text
            </h1>
            <h3>
                Description
            </h3>
        </div>
    </div>

CSS：（.image-container .detail 保持不变）

.image-container img{
    padding-top: 10px;
    width: 100%;
    height: 48vw;
    min-height: 380px;
    max-height: 550px;
    position: relative;
}

我希望它是这样的： 预期的（原始结果）
相反，我得到了： 更改代码的结果

除此之外，我还希望我的图像在调整屏幕大小时聚焦在图像的中心，而不是仅仅裁剪底部。

谢谢你。这可能太具体了，但我相信这会帮助那些也使用 CSS 背景图像而不是 HTML 标记的人。

标签： htmlcssimagebackground-image

解决方案

检查这支笔
如我所见，您的代码没有任何问题。
用于将图像对齐到中心使用

 background-position: center;

如果您使用 img 标签进行图像，请使用以下属性。

object-fit: cover;
object-position: bottom;

推荐阅读