我有一张16:9(1920 x 1080)的画,上面有一些led灯带.

我的目标是实现渐变色的div以模拟灯光效果,但我只能在图像在背景上是静态的情况下进行.

我已经try 使用background-image而不是<img>标签,并try 创建一个包含position relativeabsolute的包装.此外,我只在css中使用响应值(百分比和视口).

我认为问题在于,object-fit: cover通过zoom 来调整图像,而div图像则不遵循这一点.

这就是我在这个项目中使用的图像.画上的LED条上已经有一盏粉红色的灯出来了,我正试着在有一个div的粉色灯上面再做一盏新灯.

enter image description here

This green light is the div that I'm trying to put above the pink light: enter image description here

      .cafe-image div.left-light {
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0),
          rgba(101, 221, 137, 0.671)
        );
        width: 40%;
        height: 30%;

        transform: skew(28deg) rotate(15deg);

        position: absolute;
        top: 8.9%;
        left: -4.8%;
      }

It is not perfectly positioned, but I'm just trying to keep this green light on the right spot: enter image description here

...But when I resize the tab, that green light just change his position: enter image description here

简而言之,不管页面大小如何,我想让这段绿光始终停留在图像的特定点上.

完整代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .cafe-image {
        position: relative;
      }

      .cafe-image img {
        object-fit: cover;
        width: 100vw;
        height: 100vh;
      }

      .cafe-image div.left-light {
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0),
          rgba(101, 221, 137, 0.671)
        );
        width: 40%;
        height: 30%;

        transform: skew(28deg) rotate(15deg);

        position: absolute;
        top: 8.9%;
        left: -4.8%;
      }
    </style>
  </head>
  <body>
    <div class="cafe-image">
      <img src="https://i.postimg.cc/jq6xMxMC/cafe.jpg"/>

      <div class="left-light"></div>
    </div>
  </body>
</html>

推荐答案

最简单的方法是使用另一个相同大小的图像,因此对象拟合将用于两个具有相同结果的图像.

下面是一个svg示例,该svg使用渐变和混合模式来混合两种图像:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div,
div img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  display: block
}

div {
  display: grid;/* i use grid to pile image, you can use absolute too */
}

img {/* lets put image in the same grid cell and blend them with the page */
  grid-row: 1;
  grid-column: 1;
  mix-blend-mode: darken;
}
<div>
  <img src="data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%221919%22%20height%3D%22963%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22%0D%0Adisplay%3Ablock%3B%0D%0Awidth%3A1963px%3B%0D%0Aheight%3A963px%3B%0D%0Abackground%3A%20linear-gradient%2876.5deg%2C%20transparent%2040.25%25%2C%20white%2040.5%25%29%2C%20linear-gradient%2815.5deg%2C%20transparent%2064.5%25%2C%20white%2065%25%29%2Clinear-gradient%2815deg%2Ctransparent%2020%25%20%2C%20rgb%28101%2C%20221%2C%20137%29%2060%25%29%3B%22%3E%0D%0A%20%20%3Crect%20width%3D%221919%22%20height%3D%22963%22%20x%3D%220%22%20y%3D%220%22%20fill%3D%22transparent%22%20%2F%3E%0D%0A%3C%2Fsvg%3E">
  <img src="https://i.stack.imgur.com/YwLqP.jpg"></div>

以下是SVG嵌入的代码:

<svg width="1919" height="963" xmlns="http://www.w3.org/2000/svg" style="
display:block;
width:1963px;
height:963px;
background: linear-gradient(76.5deg, transparent 40.25%, white 40.5%), linear-gradient(15.5deg, transparent 64.5%, white 65%),linear-gradient(15deg,transparent 20% , rgb(101, 221, 137) 60%);">
  <rect width="1919" height="963" x="0" y="0" fill="transparent" />
</svg>

您可以使用自己的图像,然后使用混合混合模式、png或gif或任何您自信地填充的图像,其 idea 是使用相同大小的图像来遵循对象匹配规则;)


aside the question : To turn the svg into a daturi, i used https://dopiaza.org/tools/datauri/index.php

Html相关问答推荐

当表头包含特殊字符时,R Quarto发布的HTML表中不必要的大列宽

浏览器是在调整大小还是在全屏上交换视频源?

获得一个css框,以便在页面太小时不再粘在页面的角落.

MatSnackBar: colored颜色 不起作用

如何使用CSS在NSAttributedString中为HTML文本中的图像制作覆盖图

在<;style&>中列出的三种字体中,只有两种显示

:invalid Select 器的惰性判断

如何将内容放置在侧边栏旁边?

如何正确地嵌套Flexbox

如何消除线性渐变线的模糊?

如何调整网格中单元格的高度?

将图像高度调整到容器 div 中而不使其高度增加

在 vscode 中找不到 htmltagwrap 命令

如何并排放置
的定义列表,但如果
变长,
会向下移动?

如何为某些行具有 rowspan 的表的每个奇数行着色

我如何让这个动画播放,然后停止,然后在设定的时间后再次播放? (CSS)

我可以在标签元素中使用标题元素吗?

变换元素以适应高度(Angular,SCSS)

根据正则表达式 attr 从 read_html 过滤表格

当父容器包含多个元素时,CSS hover margin-top 更改不起作用