0

这是一个非常简单的问题，所以我必须做一些非常愚蠢的事情：我无法在 div 中正确复制背景图像。

我在下面的小例子中减少了它。我有一个具有特定像素大小的主 div，并且限制为比当前视口小一定数量。其中，我有第二个 div，其中包含固定（非滚动）背景图像。我需要将图像放在一个单独的 div 中，这样它的不透明度就不会影响其他任何东西。

此示例尝试在主 div 中复制 2x2 的背景图像（即宽度和高度 = 50%），但我尝试的所有组合都是基于视口大小而不是父 div 大小。

注意：你需要在全屏模式下运行这个例子才能明白我的意思。主 div 小于视口，我无法获得图像的完整 2x2 复制。

<!DOCTYPE html>
<html>
<head>
<title>Test background</title>
<meta charset="utf-8"/>

<style>
div.tp-main {
    background: #f0f0f0;
    border-style: solid;
    border-width: thin;
    margin: 0px;
    padding: 0px;
    max-width: 99vw;
    max-height: calc(52.294vw - 23px);
    width: 1090.00px;
    height: 570.00px;
}

div.tp-bg { /* Separate div to avoid opacity affecting other stuff */
    width: 100%;
    height: 100%;
    background-image: url("https://clipartart.com/images/tree-branch-clipart-png-4.png");
    background-size: 50.00% 50.00%;
    background-repeat: repeat;
    background-position: 0 0;
    background-attachment: fixed;
    opacity: 0.20;
}

</style>
</head>


<body>

<div class="tp-main">
<div class="tp-bg"></div>
</div>

</body>
</html>

4

0 回答 0