Question

我正在尝试执行以下操作：

我目前的代码加载图像作为背景但我似乎无法在图像顶部获得对角线div框并使其成为对角线

HTML

<div>

    <style>
        landingDiv {
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        img.bg {
            /* Set rules to fill background */
            min-height: 100%;
            min-width: 1024px;
            /* Set up proportionate scaling */
            width: 100%;
            height: auto;
            /* Set up positioning */
            position: fixed;
            top: 0;
            left: 0;
            opacity: 10;
            background-image: url("https://assets.fanart.tv/fanart/movies/155/moviebackground/the-dark-knight-51f269c2ce53a.jpg")
        }

        @media screen and (max-width: 1024px) { /* Specific to this particular image */
            img.bg {
                left: 50%;
                margin-left: -512px; /* 50% */
            }
        }
    </style>
    <img class="landingDiv bg" />

    <div style="height: 30px; width: 100%; background-color: gray;">
        Hey
    </div>

</div>

JSFiddle

Answer 1

Z-index 属性可能会有所帮助，因为我看到了您的问题，

z-index 属性指定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。 注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

所以这里如果你想要你的背景图像和前面的div那么

添加

       img.bg { z-index:-1 ;}

所以在这里你可以看到我给了img.bg的-1，这使它成为div的低优先级...你现在可以随意使用它了。

＆＃13;

            landingDiv {
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }
    
            img.bg {
                /* Set rules to fill background */
                min-height: 100%;
                min-width: 1024px;
                /* Set up proportionate scaling */
                width: 100%;
                height: auto;
                /* Set up positioning */
                position: fixed;
                top: 0;
                left: 0;
                opacity: 10;
                background-image: url("https://assets.fanart.tv/fanart/movies/155/moviebackground/the-dark-knight-51f269c2ce53a.jpg");
                
                
              z-index : -1 ;
            
            }
            
    
            @media screen and (max-width: 1024px) { /* Specific to this particular image */
                img.bg {
                    left: 50%;
                    margin-left: -512px; /* 50% */
                }
            }

＆＃13;

    <div>
    
        
        <img class="landingDiv bg" />
    
        <div style="height: 30px; width: 100%; background-color: gray;">
            Hey
        </div>
    
    </div>

＆＃13;

Answer 2

您可以在背景图像规则中添加渐变叠加层：

 background-image:
     linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.3) 80%, transparent 80%), 
     url("https://assets.fanart.tv/fanart/movies/155/moviebackground/the-dark-knight-51f269c2ce53a.jpg")

landingDiv {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  opacity: 10;
  background-image: linear-gradient(-10deg, transparent 20%, rgba(255, 255, 255, 0.3) 20%, rgba(0, 0, 255, 0.3) 80%, transparent 80%), url("https://assets.fanart.tv/fanart/movies/155/moviebackground/the-dark-knight-51f269c2ce53a.jpg")
}

@media screen and (max-width: 1024px) {
  /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;
    /* 50% */
  }
}

<div>

  <img class="landingDiv bg" />

  <div style="height: 30px; width: 100%; background-color: gray;">
    Hey
  </div>

</div>

一些可能的例子：

https://jsfiddle.net/mv75qn9c/1/（较暗）
https://jsfiddle.net/mv75qn9c/2/（较轻）
任何rgba（）颜色都可以，相同或混合https://jsfiddle.net/mv75qn9c/3/

根据您的需要调整度和透明/ rgba（）区域。

注意：脆弱的边缘可以模糊设置颜色停止值，并从值中的litlle差异开始：

linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.3) 20.1%, rgba(0,0,0,0.3) 80%, transparent 80.1%)

创建对角背景框

2 个答案: