使用CSS3的线性渐变div

请帮助我如何使用CSS下面的图像路径使div。使用CSS3的线性渐变div

<table class="screenheader" cellspacing="0" cellpadding="0" width="100%" style="padding-top: 5px;"> 
    <tr style="font-family: Calibri, Arial, Sans-Serif; font-size: 40pt; font-weight: bold; 
    color: #fff; background: repeating-linear-gradient(180deg, #23538A , #A7CFDF 5px, #23538A 5px, #A7CFDF 10px);"> 
     <td width="100%" style="padding-bottom: 5px;"> 
      <div id="meetingname" width="100%" style="padding-left: 20px; text-align: left;"> 
       HI Test 
      </div> 
     </td> 
     <td width="100%" style="padding-left: 20px; text-align: left;"> 
     </td> 
    </tr> 
</table>

来源

2013-03-14 giriraj

您可以将图片内联，你应该把你的标记中的问题。 – 2013-03-14 12:30:50

我有一个声望，所以我不能把图像。请帮我设计一个像我的图像div – giriraj 2013-03-14 12:41:25

这是一些可怕的旧学校代码，你到了那里。 – powerbuoy 2013-03-14 13:09:49

这是你的意思（颜色身边，我不能让那些右）？
http://jsfiddle.net/L8FfE/2/

HTML：

<div id="background"> 
    <div id="overlay"></div> 
</div>

CSS：

div#background { 
    width: 100%; 
    height: 50px; 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#053F63), to(#105C97)); 
    background: -webkit-linear-gradient(#053F63 0%, #105C97 100%); 
    background: -moz-linear-gradient(#053F63 0%, #105C97 100%); 
    background: -o-linear-gradient(#053F63 0%, #105C97 100%); 
    background: linear-gradient(#053F63 0%, #105C97 100%); 
} 
div#overlay { 
    font-family: Calibri, Arial, Sans-Serif; 
    font-size: 40pt; 
    font-weight: bold; 
    color: #fff; 
    width: 100%; 
    height: 50px; 
    background: -moz-repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px); 
    background: -webkit-repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px); 
    background:   repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px); 
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0)), color-stop(0.4, rgba(0, 0, 0, 0)), color-stop(0.6, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 1))); 
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%); 
      mask-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%); 
      mask-image:  -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%); 
      mask-image:   linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%); 
}

来源

2013-03-14 13:28:27 Papagaai35

谢谢CSS正在为我工作。再次感谢您。 – giriraj 2013-03-14 13:39:17

这是不完全正确。您将需要另一个div来实现左侧渐变和垂直渐变。我只为Chrome编写了这个文件，并且您还必须将#colors更改为rgba，但您可以看到in the JS fiddle here它看起来更像jpeg。

HTML

<div class="rightGradient"> 
    <div class="horizontal stripes"></div> 
    <div class="topGradient"></div> 
</div>

CSS

.stripes { 
    position: relative; 
    height: 100px; 
    width: 375px; 
    -webkit-background-size: 100% 6px; 
} 

.horizontal { 
    background-color: transparent; 
    background-image: -webkit-linear-gradient(top, #0f5b97 50%, transparent 50%, transparent); 
} 

.rightGradient { 
    position: absolute; 
    height: 100px; 
    width: 375px; 
    background-image: -webkit-linear-gradient(right, #074166 20%, #0f5b97 70%); 
} 

.topGradient { 
    position: absolute; 
    top: 0px; 
    height: 100px; 
    width: 375px; 
    background-color: transparent; 
    background-image: -webkit-linear-gradient(286deg , #074166 -20%, transparent 70%); 
}

来源

2013-03-14 14:37:35 po228

使用CSS3的线性渐变div

回答

相关问题