代码之家 › 专栏 › 技术社区 › Jamie Rees

创建对角背景框

css html

-1

Jamie Rees · 技术社区 · 8 年前

我正试图做以下事情:

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

2 回复 | 直到 8 年前

G-Cyrillus 8 年前

可以在背景图像规则中添加渐变覆盖:

 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/

注: 脆边可以模糊设置颜色停止值和开始值的微小差异:

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

Satyam Pathak 8 年前

Z指数

这个属性指定元素的堆栈顺序。具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。 注:z索引仅适用于定位元素(位置:绝对、位置:相对或位置:固定)。

这里,如果你想把你的图像放在背景里,把div放在前面

添加

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

            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% */
                }
            }

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