Question

我正在尝试向CSS添加三角形的线性渐变。 https://ibb.co/MZfbY0F

我已经在jsFiddle上实现了它。但是在chrome或mozilla中，它显示如下： https://ibb.co/FxR1pGQ

body {
      height: 100vh;
      margin: 0;
      background: 
      linear-gradient(to top left, transparent 50%, rgba(255, 0, 0, 0.5) 51%) 0 0%/35% no-repeat, 
      url(https://lorempixel.com/1000/1000/) center/cover;
    }
    div {
       height:200px;
       text-align:left;
       color:#fff;
       padding:10px;
       font-size:25px;
    }

<div>
    <p>Some content</p>
</div>

Answer 1

尝试一下。

   #triangle-topleft:after {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
}

<div id="triangle-topleft">some Text</div>

Answer 2

您应该为线性背景添加浏览器前缀

body {
      height: 100vh;
      margin: 0;
      background: -moz-linear-gradient(to top left, transparent 50%, rgba(255,0,0,0.5) 51%) 0 0%/35% no-repeat, 
      url(https://lorempixel.com/1000/1000/) center/cover; /* FF3.6-15 */
background: -webkit-linear-gradient(to top left, transparent 50%,rgba(255,0,0,0.5) 51%) 0 0%/35% no-repeat, 
      url(https://lorempixel.com/1000/1000/) center/cover; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top left, transparent 50%,rgba(255,0,0,0.5) 51%) 0 0%/35% no-repeat, 
      url(https://lorempixel.com/1000/1000/) center/cover; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80ff0000',GradientType=0 ) 0 0%/35% no-repeat, 
      url(https://lorempixel.com/1000/1000/) center/cover; /* IE6-9 */
    }
    div {
       height:200px;
       text-align:left;
       color:#fff;
       padding:10px;
       font-size:25px;
    }

<div>
    <p>Some content</p>
</div>

使用线性梯度css

2 个答案: