Question

我目前在“日期”后面有一个文本背景颜色，跨越文本框的宽度。我想在此添加它，以便它在右边淡出。但是当我添加它时，它只是使文本成为渐变，背景消失。

background-color:-webkit-gradient(linear, 100% 100%, 0 0, from(white), to(#55565a), color-stop(80%, #55565a));

.date { 
    font-family: sans-serif; 
    font-size: 14px; 
    font-weight: 500;
    color: white; 
    margin-top: 9px;
    opacity: 0.7;
    letter-spacing: 3px;
    text-transform: uppercase;
    background-color: #adadad;
    padding:10px;
    margin-left:-41px;
    margin-right:-41px;
    padding-left:30px;
    display : block;
}

更新：

浅蓝色条纹：

hr {
margin-top: 10px;
width: 100%;    
color: #B7C3E6;
background-color: white;
height: 25px;
margin: 0px auto;
opacity: 0.2;
border: none;
background: -webkit-gradient(linear, 100% 100%, 0 0, from(white), to(#B7C3E6), color-stop(80%, #B7C3E6));

}

Answer 1

这样的东西？

<强> jsFiddle

.date { 
    font-family: sans-serif; 
    font-size: 14px; 
    font-weight: 500;
    color: white; 
    margin-top: 9px;
    opacity: 0.7;
    letter-spacing: 3px;
    text-transform: uppercase;
    background-color: #adadad;
    padding:10px;
    margin-left:-41px;
    margin-right:-41px;
    padding-left:30px;
    display : block;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkYWRhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgyJSIgc3RvcC1jb2xvcj0iI2FkYWRhZCIgc3RvcC1vcGFjaXR5PSIwLjE4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  rgba(173,173,173,1) 0%, rgba(173,173,173,0.18) 82%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(173,173,173,1)), color-stop(82%,rgba(173,173,173,0.18)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */

}

使用CSS Gradient Generator生成渐变。

如何使（。日期）文本背景颜色成为渐变（淡出）？

1 个答案: